低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

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

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でどうしても表示が崩れるという場合は、こちらのテクニックを使ってみてはいかがでしょうか。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ