右对齐按钮垂直未对齐

Question

我有一行标题文本和右侧的按钮。

<div class="page-header"> 
    <div class="pull-right"> 
     <button type="button" class="btn btn-success pull-right">Set All Values</button> 
    </div> 
    <h4>Points Earned for Each Chapter</h4> 
</div> 

上面的代码是我目前的，但我已经尝试了很多变化。在所有这些中，按钮不与文本垂直对齐。 （下面的图像包括叠加，当我悬停在铬的元素窗格中的元素，以显示垂直对齐方式。）

搜索计算器上存在的问题，我发现这个问题贴多次;然而，我没有找到有用的答案。

有人想过这个吗？

Answer 1

发生这种情况的原因是标题的行高和按钮的高度不同。

随着line-height: 1.9;为标题它应该工作：

.page-header h4 { 
 
    line-height: 1.9; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="page-header"> 
 
    <div class="pull-right"> 
 
     <button type="button" class="btn btn-success pull-right">Set All Values</button> 
 
    </div> 
 
    <h4>Points Earned for Each Chapter</h4> 
 
</div>

Answer 2

您可以尝试使用网格是移动的友好，使里面的一切垂直对齐。

<div class="page-header vertical-center"> 
    <div class="row"> 
     <div class="col-md-8"> 
      <h1>Text on the left</h1> 
     </div> 
     <div class="col-md-4"> 
      <button type="button" class="btn btn-success pull-right">Set All Values</button> 
     </div> 
    </div> 
</div> 

添加这个CSS

.row > div { 
    border: 1px solid black; 
    } 
    .vertical-center .row { 
    display: flex; 
     align-items: center; 
    } 
    /*maybe create an id instead of h1*/ 
    h1 { 
    margin: 0; 
    }