Html 引导程序中的输入对齐问题

我有下面的代码，我试图让这两个输入对齐。代码中的问题在哪里

<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>

@
P
.文本中心{
宽度：50%；
}
div{
文本对齐：居中；
}

---

两个输入仍然向左对齐。

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

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

这将使输入集中在父元素内