[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ!」というようなテクニックがないような気がする。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
のようなラッパー要素がないと実現できないのでマークアップに依存するというのが一番大きな欠点。