【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法

2024年3月28日

今回のテーマは　flex　です。
ヘッダーにおいて、ロゴとナビゲーションの高さを中央でそろえる方法を紹介します。

ロゴが左にあって、右側にナビゲーションがある。
というのはヘッダーのよくあるパターンです。

「よし、flexで並べて、これでオッケー」
と思いきや、
「あれ、高さが合わないな・・・」
「どうやるんだっけ。　line-height だっけ・・・」
ってなってしまった時にこの記事を参考にしてください。

それではいきましょう。

高さが合わないとき

おそらくこんな状況で困ってますよね。

確かに高さが合ってないですね。

※見ずらい、わかりづらい場合はHTMLとCSSを非表示にして、Rsultだけ表示させてください。

今回の解決コードは
align-items: center;
です。

ヘッダー以外にも、flex　を使用したときにけっこう使いますので、
「display: flex;」を使うときはセットで覚えておくといいと思います。

いかがでしたでようか。

display: flex;　（横に並べる）
align-items: center;　（高さを中央（真ん中）でそろえる）

これでバッチリですね。

flexの関連記事も紹介してきます。