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

您可以使用稍微不同的路线，而不是使用内置类的引导程序：

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;
}

垂直对齐不工作按钮

1 个答案:

Demo Fiddle