inline-blockを用いて横に並べた要素を中央に寄せるテクニック

2010年10月20日

inline-blockを用いることで、ulやfloatを使わずに、横に並べた要素を中央に寄せることができます。

HTML

1<ul>
2  <li><a href="#"><< 前へ</a></li>
3  <li><a href="#">1</a></li>
4  <li><a href="#">2</a></li>
5  <li><a href="#">3</a></li>
6  <li><a href="#">4</a></li>
7  <li><a href="#">5</a></li>
8  <li><a href="#">次へ >></a></li>
9</ul>

CSS

01ul {
02    margin: 20px;
03    padding: 0;
04    list-style-type: none;
05    text-align: center;
06}
07 
08li {
09    display: inline-block;
10    margin: 0;
11    padding: 0;
12    list-style-type: none;
13}
14    * html li { display: inline; }
15    *:first-child+html li { display: inline; }
16 
17li a {
18    text-decoration: none;
19    color: #666666;
20    padding: 4px 6px;
21    border: 1px solid #CCCCCC;
22    margin: 0 4px;
23    zoom: 1;
24}
25li a:hover {
26    border: 1px solid #CCCCCC;
27    color: #000000;
28    background-color: #DBDBDB;
29}

サンプルページ

IE6とIE7ではinline-block要素が対応している対象がaやspanなどのインラインレベルの要素のみなので、ここではzoom: 1;とdisplay: inline;で代替しています。

この方法ではfloatを使用しないため、clearfixを使わずとも表示が崩れる心配がありません。floatでどうしても表示が崩れるという場合は、こちらのテクニックを使ってみてはいかがでしょうか。