前提・実現したいこと
HTML5、CSS3についてご相談させてください。
無知かつ不束者で申し訳ございませんが、ご教示いただけましたら幸いです。
横並びメニューに対し、CSSによるレイアウト調整を行っています。要件は以下の通りです。
・li要素で横並びメニューを作成
・メニューは画面に対し左右中央揃え
・メニューアイテムのテキストは上下中央揃え
・メニューアイテムは等間隔で余白あり
発生している問題・エラーメッセージ
li要素がブロックレベルのため、テキストの上下中央揃えは指定できない。 また、数値で余白を指定する中央揃えといったテクニックもあまり使用したくない。 CSSのレイアウトのお作法を知らず、本要件を実現するのに最もシンプルで 一般的と思われるレイアウト指定方法を知りたい。
該当のソースコード
HTML
1<head> 2<style> 3ul { 4 display:flex; /* 横並び */ 5 justify-content: center; /* 画面に中央揃え */ 6} 7li { 8 list-style-type: none; /* 箇条書きマーカー除去 */ 9 vertical-align: middle; /* テキストを上下中央揃え ※ブロックレベルには効かない */ 10 border: solid 1px #000; /* 罫線 */ 11 width: 100px; /* 幅100px */ 12 height: 50px; /* 高さ50px */ 13 margin: 10px; /* 外側余白10px */ 14} 15</style> 16</head> 17<body> 18<ul> 19 <li><a href="">facebook</a></li> 20 <li><a href="">twitter</a></li> 21 <li><a href="">instagram</a></li> 22</ul> 23</body> 24
試したこと
li要素をdisplay:table-cellにすると上下中央揃えができるものの
ul要素(親要素)をdisplay:flexにしたことにより(?)上下中央揃えが適用されなくなる。
補足情報(FW/ツールのバージョンなど)
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/12 01:13