CSS 表单输入元素不居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6614084/
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
Form input elements not centering
提问by EmmyS
I've looked at a number of different answers here, and they all seem to boil down to text-align: center in the parent div's style. I've tried that, and it's working for labels, but not actual input elements.
我在这里查看了许多不同的答案，它们似乎都归结为 text-align: center 在父 div 的样式中。我试过了，它适用于标签，但不适用于实际的输入元素。
Here's the basic code:
这是基本代码：
html
html
<div id="content">
<div id="login_form">
<h2>Log in to DOT Voting</h2>
<form>
<label for="username">Username</label>
<input type="text" name="username" value="" />
<label for="password">Password</label>
<input type="password" name="password" value="" />
<input type="submit" name="submit" value="Log In" />
</div>
</div>
css
css
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 0 1em 0;
width: 90%;
border: 1px solid #818181;
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
The login_form div is centered on the page, the form labels are centered in the div, and the submit button is centered in the div. But the text input boxes are not centered. What can I do to force them to center? (I don't care if the content of the input boxes is centered; I just want the boxes themselves centered in the div.)
login_form div 在页面居中，表单标签在 div 中居中，提交按钮在 div 中居中。但是文本输入框没有居中。我该怎么做才能迫使他们居中？（我不在乎输入框的内容是否居中；我只希望框本身在 div 中居中。）
回答by rolling stone
回答by David says reinstate Monica
Amend the margindeclaration for your inputelements to use autofor margin-leftand margin-right:
修改元素的margin声明input以auto用于margin-left和margin-right：
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 auto 1em auto;
width: 90%; /*280px;*/
border: 1px solid #818181;
/* -moz-border-radius: 1px;
-webkit-border-radius: 1px; */
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: auto;
margin-left: auto;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
回答by Emily
text-align does not work on block elements. Remove the display:blockon input[type=text], input[type=password]or change it to display:inline-block. Note that inline-block does not work for < IE7.
text-align 不适用于块元素。删除display:blockoninput[type=text], input[type=password]或将其更改为display:inline-block。请注意，内联块不适用于 < IE7。
Or since you have a width declared on the input, you can remove the text-align:centerand use margin: 0 auto 1em auto;
或者因为你在输入上声明了一个宽度，你可以删除text-align:center并使用 margin: 0 auto 1em auto;
回答by Downtap
It's centering based on the 90% input[type=text], input[type=password] css value. You can define that with a fixed width, or for liquid layouts, set it to 100% width and adjust it's margin.
它基于 90% input[type=text], input[type=password] css 值居中。您可以使用固定宽度定义它，或者对于液体布局，将其设置为 100% 宽度并调整其边距。
