HOME > 開発者向けBLOG > Webデザイン >  リストの中央寄せ

Technology Note 開発者向けBLOG

Webデザイン

リストの中央寄せ

こんにちは、ゼノフィ渡部です。

ul liタグで幅を決めずに横並びで中央に寄せる方法をご紹介いたします。

liを横並びにするときは、「float: left;」を指定することが多いと思います。幅が固定ならば中央寄せにすることは難しいことではありませんが、なんらかの事情で幅が決められない場合に、「float: left;」での横並びで中央寄せを実現しようとすると難しいものがあります。

「ul.center」の「text-align: center; 」でul自体を中央寄せにします。次に、「ul.center li」の「display: inline-block;」で横並びにします。「display: inline-block;」はブロック要素と同じように幅と高さを指定することができます。また、インライン要素と同じで同一の行内に表示されます。

1
2
3
4
5
6
7
8
9
10
11

ul.center {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
  text-align: center; /* 中央寄せ */
}
 
ul.center li {
  list-style-type: none; /* リストのマーカーを消去 */
  display: inline-block; /* 横並びに */
  margin: 0 10px 0 0;
}

「display: inline-block;」は素晴らしいプロパティですが、IE6とIE7は対応していないので、「ul.center li 」に「display: inline;」としてインライン要素の指定をし、横並びになるようにします。

1
2
3
4
5
6
7
8
9

/* IE6 */
ul.center li {
  _display: inline; /* IE6がdisplay: inline-block;に対応していないので */
}
 
/* IE7 */
*:first-child+html ul.center li {
  display: inline; /* IE7がdisplay: inline-block;に対応していないので */
}

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ul.center {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
  text-align: center; /* 中央寄せ */
}
 
ul.center li {
  list-style-type: none; /* リストのマーカーを消去 */
  display: inline-block; /* 横並びに */
  margin: 0 10px 0 0;
}
 
/* IE6 */
ul.center li {
  _display: inline; /* IE6がdisplay: inline-block;に対応していないので */
}
 
/* IE7 */
*:first-child+html ul.center li {
  display: inline; /* IE7がdisplay: inline-block;に対応していないので */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<ul class="center">
    <li>
        <a href="#">
            リスト1
        </a>
    </li>
    <li>
        <a href="#">
            リスト2
        </a>
    </li>
    <li>
        <a href="#">
            リスト3
        </a>
    </li>
    <li>
        <a href="#">
            リスト4
        </a>
    </li>
    <li>
        <a href="#">
            リスト5
        </a>
    </li>
</ul>

<

>

PAGETOP