No.190

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

　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。