右揃えボタンが垂直方向にずれる

Question

右にヘッダーテキストとボタン付きの行があります。

上記のコードは現在のものですが、多くのバリエーションを試しました。それらのすべてにおいて、ボタンはテキストと垂直方向に整列していません。 （私は垂直方向の配置を示すために、クロームのElementsペインの要素にカーソルを合わせると画像が下のオーバーレイが含まれています。）stackoverflowの上の既存の質問を検索

、私は投稿この質問を見つけましたいくつかの回。しかし、私は知識のない答えを見つけませんでした。

誰もこれを理解しましたか？

Answer 1

これは、見出しの行の高さとボタンの高さが異なるために発生します。あなたがモバイルフレンドリーであることと、すべてが内部に垂直に整列させるためにグリッドを使用して試すことができます

.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

：それは動作するはず向かうためline-height: 1.9;で

。

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

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

このCSSを追加