inline-blockで要素を横並びで、且つ、横並びにした要素を中央揃えにする方法です。
floatを使って揃えるのと違い、親要素の幅が決まっていなくてもいいので、
親要素の幅が変わる場合、例えば、ブログのようにページ数が今後増えたり、
カテゴリによってはページ数が少なかったりする場合でも使えます。
inline-blockを使うと要素間で隙間が出来てしまいますが、
その対応方法も調べてみました。
横並びで中央揃えする方法
ページ送りのリストを想定して、liタグで組みました。
<ul> <li>前</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>次</li> </ul>
CSSはこのようにしてます。
ul { padding: 0; margin: 20px 0; text-align: center; } ul li { border: 1px solid #555; padding: 10px; list-style: none; display: inline-block; }
横並び中央揃えにしているところを最低限抜き出すと以下です。
ul { text-align: center; } ul li { display: inline-block; }
inline-blockを使うと隙間ができてしまい、margin:0としても隙間は埋まりません。
そこでいくつか対処法があります。
対処法①liタグを横一直線に
HTMLのliタグを横一直線にします。
<ul> <li>1</li><li>2</li><li>3</li> </ul>
簡単ですがCMSなどブログシステムでliタグが増えたり減ったりするときに、自動でこういう形にしてくれるかちょっと不安です。
対処法②liタグの閉じタグをなくす
HTMLのliタグの閉じタグを消します。HTML5ではなくてもエラー出ないそうです。
<ul> <li>1 <li>2 <li>3 <li>4 <li>5 </ul>
これも簡単ですが、①と同じ理由とちょっと見栄えがなぁと..。
letter-spacingを使う
CSSのletter-spacingで親要素にマイナス指定をして、liタグにnormalを指定して元に戻します。
ul { letter-spacing: -0.4em; } ul li { letter-spacing: normal; }
これはCSSで調整するので、CMSによるHTMLの書き出しを気にする必要ないです。
あと簡単。
ただ、letter-spacingはブラウザによって解釈がちょっと違うらしいので、様子見という感じでしょうか
font-sizeを使う
font-size:0を親要素にかけて、子要素で元に戻す方法です。
ul { font-size: 0; } ul li { font-size: 14px; }
これも③と同様CSSなので、HTMLの書き出しを心配する必要ないですし、Letter-spacingよりも実用的かと思います。
⑤対処しない
隙間なく並べるときは上記の方法でできますが、この記事ではページ送りを想定しています。
ページ送りの要素同士はリンクになるので、marginをとると思います。
なので、きっちりつめる必要がないときは、隙間を利用してしまうのも一つかもしれません。