エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
メニューの文字を上下中央かつ左右中央に揃えるスマートな方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
メニューの文字を上下中央かつ左右中央に揃えるスマートな方法
CSSのflexボックスを利用してメニューのテキストを左右中央かつ上下中央に揃える方法です。 まずはHTML... CSSのflexボックスを利用してメニューのテキストを左右中央かつ上下中央に揃える方法です。 まずはHTMLから。 <nav id="gNav"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </nav> 次にCSSです。 #gNav>ul { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; list-style: none; } #gNav>ul>li { width: 20%; pos