css - 在 Twitter Bootstrap Grid 系统中垂直居中内容

Question

我找不到在 Twitter Bootstrap Grid 系统中垂直居中内容的方法。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 或 padding ......

像这样的行高，

.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>