横並びのリストのセンタリング

リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ！」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。

<nav class="paging">
  <ul>
    <li><a href="foo">Prev</a></li>
    <li><a href="bar">Next</a></li>
  </ul>
</nav>

というようなマークアップの一般的なページング・ナビゲーションだと、

.paging {
  text-align: center;
}

.paging ul {
  display: inline-table;
}

.paging li {
  display: table-cell;
}

という形で行う。display: tableだと幅が明示されてないとセンタリングできないのでinline-tableのが手軽で良い。.pagingのようなラッパー要素がないと実現できないのでマークアップに依存するというのが一番大きな欠点。

inline-blockとfont-size: 0

この組み合わせも簡単で一時期使っていた。これはセンタリング～ではなくて項目の隙間を消すためのテクニックということになる。inline-blockでできる隙間はフォント・サイズ依存なので、それを0にしてやって見えなくするということ。ただこれには大きな問題があって、フォント・サイズの継承がここで途切れてしまう。上記マークアップ例では.paging ulあたりでfont-size: 0にするわけだけど、そうするとli以下でフォント・サイズを元に戻すことはできない。em単位を使ったレイアウトを行っている場合は致命的になりうる。

floatとposition: relative

トリッキーな奴はその複雑さ自体は慣れてしまえばさほど問題にならないんだけど、今時だとoverflow: hiddenがちょっと良くないと思っている。overflowプロパティーはその性質上box-shadow(やoutline)プロパティーに大きな影響を与えてしまうので、意図しないデザインのカットアウトが起こる可能性が高い。単なる装飾だけならまぁ目をつぶっても良いけど、リンクにフォーカスを当てた時の点線等も見えなくなるのがちょっとよろしくない。余程の理由がない限りoverflowプロパティーは使わないというのが良いのではないかなー。僕は擬似要素で行う画像置換の時くらいに留めている。

こういうのは徐々にFlexible Box Layoutとかでやるようになっていくと思うので、数年……早ければ数か月で「あーあったね、そういうのも」みたいな感じになりそう。なって欲しい。