CSS WEB制作

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

line-up

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

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

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

それではいきましょう。

高さが合わないとき

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

height-different

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

 

 

解決コード

See the Pen
align-items
by t.h (@tomtom15)
on CodePen.


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

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

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

 

 

まとめ

いかがでしたでようか。

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

これでバッチリですね。

 

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

高単価案件が最短二日で決まる!フリーランスエンジニア案件情報サイト【ポテパンフリーランス】

-CSS, WEB制作
-, ,

© 2024 人生フリーハンド Powered by AFFINGER5