ボタンに対して垂直にnavbarのタイトルを合わせる方法

navbarのタイトルを垂直方向に中央に配置する方法がわかりません。ボタンに対して垂直にnavbarのタイトルを合わせる方法

以下の例では（リンクを参照）、スティッキーなナビゲーションバー内で垂直にセンタリングされるように「タイトル」を下げたいと思います。

ご協力いただければ幸いです。

ジェシー

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: white; 
 
    color: black; 
 
} 
 

 
button { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: none; 
 
    border: 0; 
 
} 
 

 
button:focus { 
 
    outline: 0; 
 
} 
 

 
nav { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    overflow: hidden; 
 

 
    background-color: yellow; 
 
    border-bottom: thin orange solid; 
 
    text-align: center; 
 
} 
 

 
nav.stickyNav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
} 
 

 
nav ul li h1 { 
 
    display: inline; 
 
} 
 

 
nav ul li h1.navTitle { 
 
    /* What goes here to vertically center the title? */ 
 
} 
 

 
nav ul li button { 
 
    margin: 0; 
 
    padding: 12px; 
 
} 
 

 
nav ul li button:focus { 
 
    background-color: purple; 
 
} 
 

 
nav ul li button:active { 
 
    background-color: green; 
 
} 
 

 
nav ul li button.navBtnLeft { 
 
    float: left; 
 
} 
 

 
nav ul li button.navBtnRight { 
 
    float: right; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<body> 
 
    <!-- Navbar --> 
 
    <nav class="stickyNav"> 
 
    <ul> 
 
     <!-- Left Button --> 
 
     <li> 
 
     <button class="navBtnLeft"><i class="fa fa-fw fa-2x fa-bars"></i></button> 
 
     </li> 
 

 
     <!-- Right Button --> 
 
     <li> 
 
     <button class="navBtnRight"><i class="fa fa-fw fa-2x fa-comment"></i></button> 
 
     </li> 
 

 
     <!-- Title --> 
 
     <li> 
 
     <h1 class="navTitle">Title</h1> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body>

出典

2016-09-12 Jesse

'nav'で' line-height'を設定した場合、タイトルは自動的に中央になります。 –

あなたは浮動小数点数と他のルールの束を取り除くことができ、単にフレックスボックスを使用します：この方法では、それを簡単に維持し、垂直センタリングは簡単です。 https://jsfiddle.net/q9dhcw7c/ –

.navTitle{ 
    line-height: 50px; 
}

EDIT：

あなたは、テーブルのセルを使用することができ、それは、ハードコードにしたくない場合は、ここにあります私が意味するものの例：https://jsfiddle.net/aw30L9bh/

出典

2016-09-12 23:49:54 Pat

navbarの高さを知らずにこれを達成する方法はありますか？私はすべてのコストで魔法の数字を避けたい。 – Jesse

うん、私の編集を参照してください。 – Pat

ありがとうパット！ラインハイトを確実に変更する方が簡単な解決策のようです。 – Jesse

navを表示するように設定できます。

.stickyNav li 
{ 
    display:table-cell; 
} 

.titleClass 
{ 
    vertical-align:middle; 
}

これをテストしても問題ありませんが、ほとんどの場合問題ありません。古いブラウザで多くの互換性テストをしなければならない場合を除きます。

また、上記の回答と同じようにハードコードすることもできます。

出典

2016-09-13 01:51:50

ボタンに対して垂直にnavbarのタイトルを合わせる方法

答えて

関連する問題