固定された高さのコンテナに要素を垂直にセンタリングする

Question

私はピクセルベースのナビゲーションバーが必要なウェブサイトを持っています - この場合はheight: 80pxです。

問題は、ulとli要素を垂直方向に配置することができないということです。

私は、私のjsfiddleに示されているようにtop:50%; transform: translate(0,-50%)を試していますが、フレックスポジショニングもしていますが、どれもうまくいきませんでした。

Jsfiddle：https://jsfiddle.net/agreyfield91/w3s8cj92/

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

表示フレックスと合わせ、自己のセンターを追加：あなたのコードははるかに簡単かもしれないようhttps://jsfiddle.net/w3s8cj92/1/

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
    display: flex; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    align-self: center; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 2

あなたはnav ulにnavとposition: absoluteにposition: relativeを追加する必要がありますどちらか（top: 50%; transform: translate(0,-50%);を動作させるために）、またはあなただけのnavにdisplay: flex; align-items: centerを使用することができます。私はフレックスボックスを使うだけです。

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 3

に思える：

ケースで

nav { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; /* horizontal alignment of child elements (optional) */ 
 
    background-color: bisque; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    display: flex; 
 
    align-items: center;  /* vertical alignment of text */ 
 
    border: 1px dashed red; 
 
} 
 

 
a + a { 
 
    margin-left: 20px; 
 
}

<nav> 
 
    <a href="#">Gig</a> 
 
    <a href="#">ity</a> 
 
    <a href="#">element</a> 
 
</nav>

Answer 4

もしブロックの静的な高さを有する場合、中央整列インライン[-block]の要素に垂直でないラップ容器と要素をセンタリングすることが可能です。

.vertical-container { 
 
    height: 80px; 
 
    border: 1px solid black; 
 
    white-space: nowrap; 
 
    /* this prevents vertical block to "fall out" of container */ 
 
} 
 

 
.vertical-aligner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    width: 0; 
 
} 
 

 
.vertical-content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    white-space: normal; 
 
    /* reset white-space for content */ 
 
}

<div class="vertical-container"><span class="vertical-aligner"></span><span class="vertical-content">Text that should be vertically middle of container</span></div>

私はそれに応じてあなたのフィドルを更新しました：https://jsfiddle.net/w3s8cj92/2/

P.S.を私はより多くの情報を提供したいと思いますが、後で

Answer 5

CSSは必要なのは、 `ポジションを追加することです

header { 
    height: 80px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
    display: table; 
} 

footer { background: #ddd;} 
* { color: transparent} 
nav { 
    height: 100%; 
    width: 100%; 
    background-color: bisque; 
} 
nav ul { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
    height: 80px; 
} 
nav ul li { 
    display: inline-block; 
    float: left; 
} 
nav ul li a { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    color: #aaa; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0 10px; 
}