无法在引导程序中对齐输入

Question

我有以下代码，我试图将这两个输入对齐居中。代码中的问题在哪里？

<div class='form'>
<form class="form-inline" role="form">
  <div class="text-center input-group input-group-lg">
    <span class="input-group-addon">@</span>
    <input class="text-center form-control" align="middle" placeholder="username"         name="username" type="text">
  </div>

  <div class="text-center input-group input-group-lg">
    <span class="input-group-addon">P</span>
    <input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
  </div>

</form>
</div>

<style>
.text-center {
width: 50%;
}

div {
text-align:center;

}

</style>

两个输入仍然左对齐。

Answer 1

输入不是文本，不能使用text-align居中。直接在css中定位元素，如下所示：

input {
display: block;
margin: 0 auto;
}

这会将输入置于父元素中心。