Question

我有一个关于垂直居中行的问题！

我这里有一个简单的html，使用bootstrap 3：

 <div class="container">
 <div class="row">
 <div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
 </div>
 </div>
 <div class="row">
 <div class="col-sm-12">
 <div class="thumbnail">

      <img data-src="holder.js/460x308">

  </div>
 </div>
 </div>
 </div>

我想把这个容器或行放在中心......没关系。

想象一下，我有一个500px x 500px的窗口

我想在它的中间点动它，而不是在顶部（现在是什么情况）或底部，但在中心

PS：http://jsfiddle.net/e89TE/

Answer 1

试试这个css：

.container{
   display:table;
}

.row{
   display: table-cell;
   vertical-align: middle;
}

应该有效。 PS。下次发一个小提琴

Answer 2

如果你想在图像的TOP上输入类型，你需要做的第一件事是将图像作为背景图像：

<div class="col-sm-12 text-center">
    <div class="foo">
    Some text text text text text …..
    </div>
</div>

css

.foo {
background-image:url("holder.js/460x308");
}

Bootstrap如何居中垂直

2 个答案: