无法居中对齐表单的标签字段

Question

我想把我的表格中心对齐w.r.t.页面，但如果我使用以下，只有文本输入字段正在对齐，但标签保持在左侧。如何解决？

<div id="passCode"></div>
<form class="form-horizontal">
    <fieldset>
        <legend style="color:#145FAC">Please Fill in the Online Form</legend>
        <div class="form-group">
            <label for="inputEmail" class="col-lg-2 control-label">Name</label>
            <div class="col-lg-10">
                <input type="text" class="form-control formWidth" id="inputName" placeholder="Nam" />
            </div>...</div>
    </fieldset>
</form>

Answer 1

text-align: left已应用于control-label，因此会覆盖＆＃34; center＆＃34;应用于父元素。尝试使用下面的css

.control-label, .form-control {
    text-align: center;
}

Answer 2

将此CSS用于表单：

.form-horizontal {
    margin: 0 auto;
    width: 70%; //Change it according to the design.
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/722/

Answer 3

您可以使用中心标签，因为您希望标签居中。

<center>
  <div id="passCode"></div>

  <div class="container "> <!--center_div or center-block-->
    <form class="form-horizontal">
      <fieldset>


        <legend style="color:#145FAC">Please Fill in the Online Form</legend>


        <div class="form-group">

          <label for="inputEmail" class="col-lg-2 control-label">Name</label>
          <div class="col-lg-10">
            <input type="text" class="form-control formWidth" id="inputName" placeholder="Name" required>
          </div>
        </div>
      </fieldset>
    </form>
  </div>

</center>

Answer 4

您可以将此CSS应用于form-control：

text-align: center !important;
text-align: -webkit-center !important

Answer 5

Bootstrap附带一个帮助程序类.center-block。尝试将其添加到标签中。

Answer 6

我已向您添加了Bootply示例，请检查它是否适用于您http://www.bootply.com/wokazmuDbv