在Twitter Bootstrap网格系统中垂直居中内容

Question

我没有找到在Twitter Bootstrap网格系统中垂直居中内容的方法。 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

例如

<div class="row">
  <div class="span4" style="height:50px;min-height: 50px;">My centered object vertically</div>
</div>

span4 div中的对象将始终位于div的顶部。我试图将vertical-align: middle;放在父母和孩子的Div上，但这没有帮助。

Answer 1

使用行高或填充...

像行高一样，

.line-height { line-height:30px; }

<div class="row">
  <div class="span4 line-height">My centered object vertically</div>
</div>

像这样填充，50px高度减去填充意味着 paddingtop + height + paddingbottom = 50px ，

.padding { height:30px; padding:10px 0; }

<div class="row">
  <div class="span4 padding">My centered object vertically</div>
</div>