No.190


【HTML】【CSS】横並びのリスト要素を中央揃えにする

リスト要素が中央に揃わない…

 HTMLのリスト要素。CSSの発達により横並びで記述できたりして、かなり使い勝手のいいアイテムだ。

 ところがこいつが厄介で、端から要素を並べていく関係で、単純にtext-align: centerとかでは中央に揃ってくれない。

 これを解決する方法は何個かあるが、一番簡単なのはinline-block要素にしてtext-alignが効くようにしてしまう方法だと思う。

 というわけで、自分のコピペ用にメモ。


inline-blockにする意味

 「inlineでいいんじゃないか?」と思った方、正解。並べるだけならinlineで事足りる。

 ただ、inlineだとli要素の幅や高さを指定できないという欠点がある。inline-blockにすればその問題は解決できるので、自分はinline-blockで処理してしまっている。


HTMLとCSS

 単純な例は以下になる。

<ul class="list-centered">
  <li>要素1</li>
  <li>要素2</li>
  <li>要素3</li>
</ul>
.list-centered {
  text-align: center;
}
.list-centered li {
  display: inline-block;
}

 これをコピペして改造すればOK。