Bootstrap Header的边距停止垂直居中

Question

我做了Bootply来证明这个问题。

当<h1>与其他内容在一行时，即使使用vertical-align:middle;，其边距也会阻止该内容垂直居中。是否有其他方法可以将此内容（Bootply中的红色按钮）显示为居中而无需手动复制边距？

Answer 1

您可以将按钮放在<h1>元素中，如下：

<div class="col-md-12">
  <h1>
     Code
     <span class="pull-right">
       <button class="btn btn-danger">Small</button>
       <button class="btn btn-danger">Medium</button>
       <button class="btn btn-danger">Large</button>
     </span>
   </h1>  
 </div>

Forked Bootply

编辑：最好使用<span>代替<div>，以保持有效。

Answer 2

使用与H1 ..

相同的边距

.center-y{
  vertical-align:middle;
  margin-top: 20px;
  margin-bottom: 10px;
}

Bootply：http://bootply.com/104237