[英]Bootstrap Center align a div horizontally
I have tried simple login page for a sample.我已经尝试过简单的登录页面作为示例。 But am unable to align the fields to center.
但是我无法将字段对齐到中心。
h:commandButton
is aligned to center. h:commandButton
居中对齐。 but rest of the fields are does't have any change while keep <div align="center">
但其余字段没有任何变化,同时保持
<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>
simplest way is to add a custom class .col-center
from your side to it最简单的方法是从你身边添加一个自定义类
.col-center
.col-center{
margin:0 auto;
}
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.因为 BS 有
offset
方法,但它有一个缺点,因为它只适用于偶数列大小,所以只有.col-X-2
、 .col-X-4
、 col-X-6
、 col-X-8
和col-X-10
支持col-X-10
。
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必须做:只要确保你想要居中的 div 有一个提到的 div
width
...... .col-center
将完成剩下的工作
To center a block level element horizontally in bootstrap use Use center-block
class.要在引导程序中水平居中块级元素,请使用使用
center-block
类。
For example:例如:
<div class="center-block">...</div>
截至 2019 年 10 月,class="center-block" 已被删除,并在当前引导程序版本中出于相同目的引入了 "mx-auto"。
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.