floatで並べたリストを中央揃えする

2009年6月20日 15:20 | 個別ページ

例えば、フッターメニューやblogのページャー（ページネーション/ページ切り替えメニュー）をリストで作成し、floatで横並びした際、メニュー全体をセンタリングさせようと思っても、｢margin:0auto;｣や｢text-align:center;｣など一般的にセンタリングさせる方法が効きません。

その場合、｢display:relative;｣で位置をコントロールするとうまくいきます。

(X)HTMLコード

<div id="menu">
   <ul>
   <li>メニュー1</li>
   <li>メニュー2</li>
   <li>メニュー3</li>
   <li>メニュー4</li>
   <li>メニュー5</li>
</ul>

CSSコード

div#menu {
   position: relative;
   overflow: hidden;
}

div#menu ul {
   position:relative;
   left:50%;
   float:left;
}

div#menu li {
   position:relative;
   left:-50%;
   float:left;
}