ブーストラバーnavbarの中央のテキスト

Question

私は、垂直方向の整列の件について多くの投稿があることを知っていますが、私はまだそれにいくつかの問題があります。私はデフォルトから64pxに高さを変更したnavbarを持っています。その中のすべてがその高さにもリサイズされます。私は次のようになりダウンメニューいくつかのドロップ持っている：私がいる問題がある

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Sample Text <span class="caret"></span> 
     </a> 
     <div class="dropdown-menu> 
      <h6>Text</h6> 
      <ul> 
       <!--some li elements--> 
      </ul> 
     </div> 
    </li> 
    <!--some more li elements--> 
</ul> 

をその要素李のトップレベルのULのは、ナビゲーションバーの高さとのための箱を持っているものの、コンテンツは垂直方向に中央揃えされています（上下に均等にパディング）。その中のテキストは、そのテキストを含むボックスの中央に配置されません。代わりに、左上隅にプッシュされます（a要素ではなく、パディング内の要素を含むボックスの）。私はこれをChromeの開発ツールで確認しました。私はテキストがなぜ垂直にセンタリングされていないのか、それをどうやって作るのだろうと思っています。

編集：​​3210どんな理由であれ、ドロップダウンがフィドルでは機能していないにもかかわらず、それは私の問題の目的にとっては本当に重要ではありません。

編集2： 緑色はa要素のパディングです。 a要素のテキストは青いボックスの一番上にあり、青いボックスと垂直方向にセンタリングします。

Answer 1

タグにさらに高さを追加しようとしましたか？このような？

.navbar-brand { 
float: left; 
height: 62px; 
padding: 21px 17px; 
font-size: 18px; 
line-height: 20px; 
} 

https://jsfiddle.net/z4c1atdz/11/このようにしてください。

Answer 2

高さを変更するのではなく、新しい高さに合わせるために、ナビゲーションバー内の要素にパディングを追加する必要があります。

プリプロセッサーを使用している場合、navbarの高さの変数を変更します。パディングが自動的に計算されます。

プレーンCSSを使用している場合は、新しい高さに合わせるために余分なパッドを手動で要素に追加する必要があります。基本的には：

(navbar height - element height)/2 

例として、あなたは、ブートストラップのソース（_nav-垂直align.scssのミックスイン）から抽出されたSASSのミックスインを見ることができます。

// Navbar vertical align 
// 
// Vertically center elements in the navbar. 
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 

@mixin navbar-vertical-align($element-height) { 
    margin-top: (($navbar-height - $element-height)/2); 
    margin-bottom: (($navbar-height - $element-height)/2); 
} 

これは、ナビゲーションバーのボタンに使用される、等...