html - 垂直对齐不起作用按钮

Question

我的 html 看起来像:

<header>
   <div class='content'>
      <div class='pull-left'>
        <h1>Hello World</h1>
        <h2>Lorem ipsum</h2>
      </div>

      <div class='pull-right'>
        <a href='#'>
          <button class='edit'>Edit Book</button>
        </a>
      </div>
  </div>
</header>

h1 将始终存在，但 h2 是可选的(因此高度是动态的)。我想要做的是将“编辑图书”按钮垂直居中，使其位于 .content 的中间。我已经在按钮上尝试了 vertical-align:center，但它不起作用

编辑:JSFiddle:http://jsfiddle.net/v8SfN/

Answer 1

你可以走一条截然不同的路线，而不是使用 bootstrap 的内置类:

Demo Fiddle

HTML

<header>
    <div class='layout-valign'>
        <div>
             <h1>Hello World</h1>    
             <h2>Lorem ipsum</h2>    
        </div>
        <div> <a href='#'>
          <button class='edit'>Edit Book</button>
        </a>    
        </div>
    </div>
</header>

CSS

.layout-valign {
    display:table;
    width:100%;
}
.layout-valign>div {
    display:table-cell;
    vertical-align:middle;
}
.layout-valign>div:last-child {
    text-align:right;
}