Bootstrap 如何将一个 div 水平居中对齐

Question

我尝试了一个简单的示例登录页面，但无法将字段对齐到中心位置。 h:commandButton 对齐到了中心位置，但其余字段在保持<div align="center"> 的情况下没有任何变化。

我该如何让它们保持居中对齐呢？

<div align="center">            
    <h:message for="btnSubmit"/>
    <div class='form-row'>
        <div class='col-xs-2 form-group required'>
         <label class='control-label'> User Name </label>
          <h:inputText styleClass="form-control" size="12" maxlength="20" 
                       id="userName" value="#{loginController.userName}" 
                       required="true"/>
        </div>
    </div>

    <div class='form-row'>
        <div class='col-xs-2 form-group card required'>
           <label class='control-label'>Password</label>
           <h:inputText styleClass="form-control" size="12" maxlength="20"
                        id="password" value="#{loginController.password}"
                        required="true" />
         </div>
    </div>

    <div class='form-row'>
        div class='col-md-12 form-group'>
      <h:commandButton styleClass="btn btn-success" 
               value="#{bundle['label.Login']}" id="btnSubmit" 
               action="#{loginController.clientLoginAction}"/>
        </div>
    </div>
</div>

- Teja Maridu

---

如果您添加一个 fiddle (jsfiddle.net)，您很可能会得到更快的响应！ - streetlight

Answer 1

最简单的方法是从您的一侧添加自定义类.col-center到它上面

.col-center{
  margin:0 auto;
}

为什么这样做？因为BS具有“offset”方法论，但它有一个缺点，只适用于偶数列大小，因此只支持.col-X-2、.col-X-4、col-X-6、col-X-8和col-X-10。

必须做的：只需确保您想要居中的任何div都有一个明确的width属性....col-center将完成其余工作。

- NoobEditor

Answer 2

截至2019年10月，class="center-block"已被弃用，当前的Bootstrap版本引入了"mx-auto"来实现同样的目的。

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

- RAY

Answer 3

为了在Bootstrap中将块级元素水平居中，使用center-block类。

例如：

<div class="center-block">...</div>

- dipole_moment

---

这是Bootstrap 3.0.1中的一个新类。请确保您拥有最新版本。 - dipole_moment

对我来说不起作用 <div class="col-xs-12 col-md-6 center-block"> - bawejakunal

你是否拥有Bootstrap 3.0.1或更高版本？ - dipole_moment

是的，使用3.3.6版本，尽管col-*-offset-*可以完美地工作，因此使用了它。 - bawejakunal