Html 将输入框放在div的中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1281403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Place input box at the center of div
提问by user156073
I have a div, and I want the input box to be place at it's center. How can I do this?
我有一个 div，我希望输入框位于它的中心。我怎样才能做到这一点？
回答by kta
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 :
问题在于输入元素是内联的。在将它定位到 center : margin : 0 auto 之前，我们必须让它阻塞 (display:block)。请看下面的代码：
<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>
But if you have a div which is positioned = absolute then we need to do the things little bit differently.Now see this!
但是如果你有一个定位为绝对的 div 那么我们需要做一些不同的事情。现在看看这个！
<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.
希望这能有所帮助。谢谢。
回答by August Lilleaas
#the_div input {
margin: 0 auto;
}
I'm not sure if this works in good ol' IE6, so you might have to do this instead.
我不确定这是否适用于 IE6，因此您可能不得不这样做。
/* IE 6 (probably) */
#the_div {
text-align: center;
}
回答by Ayan
You can just use the following CSS for the input field:
您可以只对输入字段使用以下 CSS：
.center-block {
margin: auto;
display: block;
}
Now in html,
现在在 html 中，
<div>
<input class="center-block">
</div>
回答by Tom
#input_box {
margin: 0 auto;
text-align: left;
}
#div {
text-align: center;
}
<div id="div">
<label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" />
</div>
or you could do it using padding, but this is not that great of an idea.
或者您可以使用填充来完成，但这不是一个好主意。
回答by Cool Hand Luke
回答by starbeamrainbowlabs
Here's a rather unconventional way of doing it:
这是一种非常规的做法：
#inputcontainer
{
display:table-cell; //display like a <td> to make the vertical-align work
text-align:center; //centre the input horizontally
vertical-align:middle; //centre the input vertically
width:200px; //widen the div for demo purposes
height:200px; //make the div taller for demo purposes
background:green; //change the background of the div for demo purposes
}
It might not be the best way to do it, and margin? won't work, but it does the job. If you need to use margin, then you could wrap the div that displays as a table cell in another 'normal' div.
这可能不是最好的方法，保证金？不会工作，但它可以工作。如果您需要使用边距，则可以将显示为表格单元格的 div 包装在另一个“正常”div 中。
JSFiddle: http://jsfiddle.net/qw4QW/
JSFiddle：http: //jsfiddle.net/qw4QW/
