CSSでfloatした要素群を中央揃えにする

一連のブロックレベル要素を横に並べるのに、float: left; などとやっていると、並ぶのはいいのだがすべて左詰め(float:leftの場合)になってしまい、中央揃えにするのは一筋縄ではいかない。どうするかというと、

<div id="container_of_content">
 <ul id="container_of_listed_items">
  <li class="listed_items">項目1</li>
  <li class="listed_items">項目2</li>
  <li class="listed_items">項目3</li>
  <li class="listed_items">項目4</li>
 </ul>
</div>

例えばこんなソースがあったとして、

div#container_of_content {
 position: relative;
 overflow: hidden;
}
ul#container_of_listed_items {
 float: left;
 position: relative;
 left: 50%;
}
li.listed_items {
 position: relative;
 left: -50%;
 float: left;
}

こうすると、

  • 項目1
  • 項目2
  • 項目3
  • 項目4

こうなる。

イメージとしては、
  • floatしたli(左に寄ってる)をulごと右に(divの幅の)50%だけ移動(left: 50%)
  • 中のliをulの幅の半分だけ左に戻す(left: -50%)

という感じ。

ただし、移動したulが右に50%はみ出るので、ulを含んでいるdivからはみ出た分を隠している(overflow:hidden)。

Leave a Reply