jQuery Bootstrap Center 水平对齐一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20950901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Center align a div horizontally
提问by Teja Maridu
I have tried simple login page for a sample. But am unable to align the fields to center. h:commandButtonis aligned to center. but rest of the fields are does't have any change while keep <div align="center">
我已经尝试过简单的登录页面作为示例。但是我无法将字段对齐到中心。 h:commandButton对齐到中心。但其余字段在保持时没有任何变化<div align="center">
How do i keep them center aligned?
我如何使它们居中对齐？
<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>
回答by NoobEditor
simplest way is to add a custom class .col-centerfrom your side to it
最简单的方法是.col-center从你身边添加一个自定义类
.col-center{
margin:0 auto;
}
why this way??because BS has the methodology of offsetbut 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-8and col-X-10are supported.
为什么这样？？因为BS具有的方法论offset，但它有一个缺点，因为它仅适用于偶数列大小，所以只.col-X-2，.col-X-4，col-X-6，col-X-8和col-X-10支持。
Must do :just make sure that whichever div you want to center, has a div widthmentioned to it.....col-centerwill do rest of job
必须做：只要确保您想要居中的任何 div 都有一个 divwidth提到它.....col-center将完成剩下的工作
回答by dipole_moment
To center a block level element horizontally in bootstrap use Use center-blockclass.
要在引导程序中水平居中块级元素，请使用 Usecenter-block类。
For example:
例如：
<div class="center-block">...</div>
回答by RAY
As of 2019 Oct, class="center-block" is dropped and "mx-auto" is introduced for the same purpose in current bootstrap version.
截至 2019 年 10 月，class="center-block" 已被删除，并在当前引导程序版本中出于相同目的引入了 "mx-auto"。
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
