我有这样的表格:
<div class="container-fluid">
<div class="span5 well">
<h2>Authentification</h2>
<form method="POST">...</form>
</div>
</div>
如何将该块(div span5井)垂直和水平居中?谢谢。
答案 0 :(得分:15)
水平居中可以通过将margin: 0 auto
添加到没有兄弟姐妹的元素来完成。
答案 1 :(得分:3)
<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>
答案 2 :(得分:0)
与Bootstrap没有任何冲突可以使用一些JS,例如this guy's JQuery.vAlign plugin。我发现它比垂直对齐技巧更直接。
答案 3 :(得分:0)
之前提到过水平居中设置余量0自动。
要动态地垂直对齐元素(当您不知道高度时),您可以相对移动50%(向上或向下),然后使用transform:translateY(50%)(+/-)将其居中它的父容器:
div.span5 {
margin: 0 auto;
top:50%;
width:400px;
position:relative;
transform: translateY(-50%);
}