本文介绍了将输入框放在div的中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个div,我希望输入框位于它的中心。我怎么做到这一点?
I have a div, and I want the input box to be place at it's center. How can I do this?
推荐答案输入元素是内联的。 在将它定位到中心之前,我们必须先将它封锁(显示:块):margin:0 auto。请参阅下面的代码:
The catch is that input elements are inline. We have to make it block (display:block) before positioning it to center : margin : 0 auto. Please see the code below :
<html> <head> <style> div.wrapper { width: 300px; height:300px; border:1px solid black; } input[type="text"] { display: block; margin : 0 auto; } </style> </head> <body> <div class='wrapper'> <input type='text' name='ok' value='ok'> </div> </body> </html>但是如果你有一个定位为绝对的div,那么我们需要做一些不同的事情。
But if you have a div which is positioned = absolute then we need to do the things little bit differently.Now see this!
<html> <head> <style> div.wrapper { position: absolute; top : 200px; left: 300px; width: 300px; height:300px; border:1px solid black; } input[type="text"] { position: relative; display: block; margin : 0 auto; } </style> </head> <body> <div class='wrapper'> <input type='text' name='ok' value='ok'> </div> </body> </html>希望这可以有帮助。谢谢。
Hoping this can be helpful.Thank you.
更多推荐
将输入框放在div的中心
发布评论