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）。


Related posts:
    

  1. WikiPediaのような2コラムの最小構成
    2.