【CSS】floatで横並びさせたリスト(li)をセンタリングする方法

フッタメニューやページングナビゲーションのコーディングで、liタグをfloatさせて横並びにすることはよくあると思います。しかし、そのリスト全体をセンタリングしようと「margin:0 auto;」や「text-align:center;」を使っても上手く中央に揃いません。

そんな時は「position:relative;」を使うと上手くいきますので、サンプルコードを紹介します。

横並びさせたリストをセンタリングする方法

ちょっとややこしいのですが、リスト全体のul要素を右に50%移動、各リスト項目であるli要素を左に50%移動させることによって実現させています。

HTML

<div id="menu">
 <ul>
  <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>
</div>

CSS

#menu {
	position: relative;
	overflow: hidden;
}
 
#menu ul {
	position:relative;
	float:left;
	left:50%;
}
 
#menu li {
	position:relative;
	float:left;
	left:-50%;
}

「left:-50%;」は「right:50%;」と同じなので、自分がわかりやすい方で問題ありません。リスト全体をかこっている「overflow: hidden;」は、ブラウザによって横スクロールバーが出てしまう場合の対策になります。

参考サイト：floatで並べたリストのセンタリング