[英]How I can center a block vertically and horizontally with Bootstrap?
I have this form: 我有这样的形式:
<div class="container-fluid">
<div class="span5 well">
<h2>Authentification</h2>
<form method="POST">...</form>
</div>
</div>
How I can center that block (div span5 well) vertically and horizontally? 我怎样才能将该块(div span5井)垂直和水平居中? Thank you. 谢谢。
可以通过向没有兄弟节点的元素添加margin: 0 auto
来完成水平居中。
<style>
.well
{
position:absolute;
width:200px;
height:200px;
top: 50%;
left: 50%;
margin-top:-100px; /* negative number 1/2 height */
margin-left:-100px; /* negative number 1/2 width */
outline:1px solid #CCC;
}
</style>
<div class="container-fluid">
<div class="span5 well">
<h2>Authentification</h2>
<form method="POST">...</form>
</div>
</div>
There's nothing conflicting with Bootstrap to use some JS for this, such as this guy's JQuery.vAlign plugin . 与Bootstrap没有任何冲突,可以使用一些JS,比如这个人的JQuery.vAlign插件 。 I find that more straight-forward than the vertical-align tricks. 我发现它比垂直对齐技巧更直接。
Horizontal centering was mentioned earlier to set margin 0 auto. 前面已提到水平居中设置边距0自动。
To vertically align the element dynamically (when you don't know the height) you can relatively shift it 50% (up or down) and then use transform: translateY(50%) (+/-) to center it within its parent container: 要动态地垂直对齐元素(当您不知道高度时),可以相对移动50%(向上或向下),然后使用transform:translateY(50%)(+/-)将其置于其父容器中心:
div.span5 {
margin: 0 auto;
top:50%;
width:400px;
position:relative;
transform: translateY(-50%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.