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>

Answer 1

最简单的方法是从您身边添加自定义类.col-center

.col-center{
  margin:0 auto;
}

为什么会这样？因为BS的方法为offset，但它有一个缺点，因为它只适用于偶数列大小，所以只有.col-X-2，{{支持1}}，.col-X-4，col-X-6和col-X-8。

必须这样做：只需确保您想要居中的哪个div，就会提到div col-X-10 .... width将完成剩余工作< / p>

Answer 2

要在引导程序中水平居中块级元素，请使用center-block类。

例如：

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

Answer 3

在2019年10月，class =“ center-block”被删除，应使用“ mx-auto”作为最新的引导程序版本。

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

Bootstrap Center水平对齐div

3 个答案: