テクト上下中央寄せにされた以下の画像のようなheaderを作成します。
それでは、メニューを上下中央寄せする方法を説明していきますね。
目次
例文
<body>
<div class="inner">
<header class="header-nav">
<div class="header-logo">
<img src="img/logo.png" alt="">
</div>
<div class="header-items">
<ul>
<li>Concept</li>
<li>Feature</li>
<li>Products</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</header>
</div>
<!--inner閉じ-->
</body>
.inner {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.header-nav {
display: flex;
align-items: center;
height: 70px;
background-color: lightblue;
}
.header-logo img {
width: 120px;
height: 22px;
}
.header-items {
margin-left: auto;
}
.header-items ul {
display: flex;
}
.header-items ul li:not(:nth-child(1)) {
margin-left: 48px;
}
上下中央寄せする【align-items: center;】
align-items: center; はdisplay: flexをかけたclass名に対してあてます。
ですので今回は、class名header-navに対して、align-items: center;をあてることで、headerの文字を上下中寄せにすることができます。
class名header-items ul にもdisplay: flex; をあてていますが、こちらにalign-items: center; はあてません。
【align-items: centerが効かない場合】
align-items: centerは、高さ（height）が指定されていないと効きません。高さがないので、どこが真ん中なのかもわからない状態になっているからです。
今回は、.header-nav にheight: 70px ; で高さを与えているので、しっかりと中央寄せされています。
そのほかの記述紹介
テクトおまけで、今回登場した記述について説明しますね！
:not(:nth-child(1))
.header-items ul li:not(:nth-child(1)) {
margin-left: 48px;
}ヘッダーメニューの1つ目の要素以外に、margin-leftをあてるという意味です。今回は、「Concept」以外にmargin-left: 48px;をあてています。
ちなみに、( )の中の数字を2に変えると、2番目以外の要素にmargin-leftをあてることになります。
margin-left: auto;
.header-items {
margin-left: auto;
}メニューを右寄せにするための記述です。
コメント