在表单中居中输入框答案

【问题标题】：Centering input box in form在表单中居中输入框
【发布时间】：2015-02-12 00:07:17
【问题描述】：

我想让输入框保持在表单的中心，但即使使用margin: 0 auto; 或display: inline-block; 也无法使其工作

#message {
    width: 90%;
    ...
    margin: 0 auto;
}

Demo

【问题讨论】：

添加#message{text-align: center;}
display: block 应该会有所帮助。

标签： html css alignment centering

【解决方案1】：

将text-align:center 添加到#subform

Input 充当inline-block 元素，您可以通过将text-align 属性赋予父级来简单地align

#subform {
  text-align: center;
}
#message {
  width: 90%;
  max-height: 25px;
  line-height: 27px;
  text-indent: 10px;
  font-size: 1em;
  color: #333;
  background: none repeat scroll 0% 0% #FFF;
  border-right: 1px solid #D9D9D9;
  border-width: 1px;
  border-style: solid;
  border-color: #C0C0C0 #D9D9D9 #D9D9D9;
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  border-image: none;
  margin: 0 auto;
}

<form id="subform" autocomplete="off">
  <input id="message" placeholder="message goes here" type="text">
</form>

【讨论】：

【解决方案2】：

margin: 0 auto 仅适用于 block 元素，因此：

#message {
    margin: 0 auto;
    display:block;
}

JSFiddle

【讨论】：

哦，我明白了。现在明白了

【解决方案3】：

试试这个简单的方法：

<form id="subform" autocomplete="off" style="text-align:center">
<input id="message" placeholder="message goes here" type="text">
</form>

【讨论】：

【解决方案4】：

试试这个简单的方法-

<input type="text" style="text-align:center;" >

【讨论】：