如何将输入文本框 HTML 居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7188192/
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
How to centre input text box HTML?
提问by Spike Lee
I have a form and I want to centre the text boxes and label to the middle. How can I do this? (I would have thought aligning the left and right to auto would do it but it doesn't work). This is my code:
我有一个表单，我想将文本框和标签居中放置。我怎样才能做到这一点？（我原以为将左右对齐到 auto 会这样做，但它不起作用）。这是我的代码：
<body>
<div id="formWrapper">
</center>
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
</div>
</body>
The style:
样式：
#formWrapper{
width:550px;
padding: 2em 0 2em 0;
border:solid 5px #F1F1F1;
margin-top: 100px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #AFC8DE;
}
回答by Chris
If you apply text-align: centerto the form it will place the fields in the center.
如果您申请text-align: center表格，它会将字段放在中心。
Semantics are important here, so take a look at an accessible approach to forms. http://www.alistapart.com/articles/prettyaccessibleforms
语义在这里很重要，所以看看一种易于理解的表单方法。http://www.alistapart.com/articles/prettyaccessibleforms
回答by Rap Sherlock
add align="center"to your form
将align="center"添加到您的表单中
div id="formWrapper">
<form method ="post" action="addMember.php" align="center">
<label for="name" >Username:</label>
<input name="name"/>
<p>
<label for="password">Password:</label>
<input name="password"/>
<p>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
</div>
回答by kleinohad
take a look at this: http://jsfiddle.net/7auS8/
看看这个：http: //jsfiddle.net/7auS8/
回答by Er.gaurav soni
border: 1px solid gray;
border-radius:5px;
color: #393939;
height: 30px;
padding: 0px 6px 0 6px;
width: 186px;
回答by greb22
I took this code and tried out adarshr answer and it does center the form. Chris is also right the semantics are very important here because after seeing it I feel like this might not be exactly what you were looking for. Another point I wanted to add to this to someone reading this who is probably a beginner is that when you add text-align: center; it needs to go in the css file and end with a ;
我拿了这个代码并尝试了 adarshr 答案，它确实使表单居中。Chris 也是对的，语义在这里非常重要，因为看到它后我觉得这可能不是你想要的。我想向阅读本文的可能是初学者的人补充的另一点是，当您添加 text-align: center; 它需要进入 css 文件并以 ; 结尾。
