将输入框放在div的中心 [英] Place input box at the center of div
本文介绍了将输入框放在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的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
