表单输入元素不居中
我在这里查看了许多不同的答案，它们似乎都归结为父 div 样式中的 text-align: center 。我已经尝试过，它适用于标签，但不适用于实际的输入元素。
这是基本代码：
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
#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;
}
login_form div 位于页面中央，表单标签位于 div 中央，提交按钮位于 div 中央。但文本输入框不居中。我该怎么做才能迫使它们居中？ （我不在乎输入框的内容是否居中；我只希望输入框本身在 div 中居中。）
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.
Here's the basic code:
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
#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.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
添加
到您的
input[type=text], input[type=password]类。另请务必删除
text-align: center;属性，因为这会导致输入中的文本居中。JSFiddle
Add
to your
input[type=text], input[type=password]class.Also be sure to remove the
text-align: center;attribute because that causes the text in the input to be centered.JSFiddle
修改
input元素的margin声明，以将auto用于margin-left和margin-right：更新了 JS Fiddle。
Amend the
margindeclaration for yourinputelements to useautoformargin-leftandmargin-right:Updated JS Fiddle.
文本对齐不适用于块元素。删除
input[type=text]、input[type=password]上的display:block或将其更改为display:inline-block。请注意，内联块不适用于 << IE7。或者，由于您在输入上声明了宽度，因此可以删除
text-align:center并使用margin: 0 auto 1em auto;text-align does not work on block elements. Remove the
display:blockoninput[type=text], input[type=password]or change it todisplay:inline-block. Note that inline-block does not work for < IE7.Or since you have a width declared on the input, you can remove the
text-align:centerand usemargin: 0 auto 1em auto;它基于 90% input[type=text], input[type=password] css 值居中。您可以将其定义为固定宽度，或者对于液体布局，将其设置为 100% 宽度并调整其边距。
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.