タイトルと一緒にヘッダーの垂直方向の整列

Question

タイトルと一緒にvertical-align: middle;へのナビゲーションを得ることができない。どのようにこの問題を解決するためのアイデア？

https://jsfiddle.net/ozvmkeaq/

header, 
 
nav { 
 
    height: 80px; 
 
} 
 
header { 
 
    background-color: #E74C3C; 
 
    vertical-align: middle; 
 
} 
 
header nav { 
 
    float: right; 
 
    list-style: center; 
 
    text-transform: uppercase; 
 
    color: #ECF0F1; 
 
    vertical-align: middle; 
 
} 
 
nav li { 
 
    display: inline; 
 
    padding: 10px; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 
.title { 
 
    float: left; 
 
} 
 
.title h1 a { 
 
    color: #ECF0F1; 
 
    text-decoration: none; 
 
    padding: 15px; 
 
}

<header> 
 
    <div class="title"> 
 
    <h1><a href="index.html"> HTTP</a></h1> 
 
    </div> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

次のCSSを追加すると、リンクが垂直方向に中央になります。

ul { margin: 0; height: 100%; display: table; width: 100%;} 
nav ul li { height: 100%; vertical-align: middle; display: table-cell;} 

私はまた、あなたのフィドルを更新しました：https://jsfiddle.net/ozvmkeaq/2/

は基本的に、あなたが途中でコンテンツをしたいブラウザを伝えるために、テーブルと垂直整列性質の組み合わせを必要とします。

代わりに、フレックスボックスを使用することもできます。

display：flex; align-items：center;

Answer 2

あなたはリストアイテム自身にvertical-align:middleを設定する必要があります。私はまた、任意のリスト項目のパディングを補償するための直接リンクにそれを設定しますなど

例えば

：これは垂直整列は、あなたが必要とするので、親要素に基づいて位置を設定しているため

nav ul li, nav ul li a{vertical-align:middle;} 

それを子要素に設定します（スタイルを親要素に設定して要素内に影響を与えることができるtext-alignなどのプロパティとは異なります）。

詳細については、W3C vertical-align property guideをご覧ください。

またはTry it hereです。

Answer 3

vertical-align CSSプロパティは、inlineまたはテーブルセルボックスの垂直方向の配置を指定します。 ulなどh1よう

要素は、デフォルトですべてのblock levelあるので、それは動作しません。インラインレベルにリセットし、真ん中に垂直に揃えることはできますが、しかし、シンプルさの理由から、私は現代のflexboxレイアウトを使用することを提案し、その例とコメントを以下のように見てください。

jsFiddle

header { 
 
    height: 80px; 
 
    padding: 0 20px; 
 
    display: flex; 
 
    justify-content: space-between; /*add space between*/ 
 
    align-items: center; /*center algin vertically*/ 
 
    background-color: #e74c3c; 
 
} 
 
header ul { 
 
    display: flex; 
 
    list-style: none; 
 
} 
 
header li { 
 
    padding-left: 10px; 
 
} 
 
header a { 
 
    text-decoration: none; 
 
    color: #ecf0f1; 
 
}

<header> 
 
    <div class="title"> 
 
    <h1><a href="index.html">Title</a></h1> 
 
    </div> 
 
    <nav class="nav"> 
 
    <ul> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 4

この2スタイルこの

header { 
    background-color: #E74C3C; 
    height: 5em; 
    position: relative; 
} 

header * { 
    padding: 0; 
    margin: 0; 
} 

header a { 
    text-decoration: none; 
} 

header nav, header .title { 
    display: block; 
    height: 100%; 
} 

header .title { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

header .title h1 { 
    position: relative; 
    top: 0.70em; 
} 

header .title a { 
    color: #ECF0F1; 
    margin: 0 0.5em; 
} 

header nav { 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 0 0.5em; 
} 

header ul { 
    list-style-type: none; 
    list-style-position: inside; 
    position: relative; 
    top: 2em; 
    right: 0; 
} 

header ul li { 
    display: inline-block; 
    padding-right: 0.25em; 
} 

Answer 5

アップデートを試してみて、それがトリックを行う必要があります。

nav ul 
{ 
    padding: 0px; 
    margin: 0px; 
} 

nav li 
{ 
    display:inline-block; 
    padding-right:10px; 
    padding-left:10px; 
    line-height: 80px; 
    background-color: green; 
}