右對齊按鈕垂直未對齊

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