Bootstrap Center水平对齐一个div [英] Bootstrap Center align a div horizontally

问题描述

我尝试过简单的登录页面进行示例。但我无法将这些字段对齐。 h：commandButton 与中心对齐。但其余字段没有任何变化，同时保持< div align =center>

I have tried simple login page for a sample. But am unable to align the fields to center. h:commandButton is aligned to center. but rest of the fields are does't have any change while keep <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>

推荐答案

最简单的方法是添加一个自定义类 .col-center 从你身边到它

simplest way is to add a custom class .col-center from your side to it

.col-center{
  margin:0 auto;
}

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

why this way?? because BS has the methodology of offset but it has a drawback as it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.

必须做：只要确保你想要居中的任何一个div，对它提到的div width .... .col-中心将会完成剩余的工作

Must do : just make sure that whichever div you want to center, has a div width mentioned to it.....col-center will do rest of job

这篇关于Bootstrap Center水平对齐一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！