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

|

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

その場合、「position:relative」で位置をコントロールするとうまくいきます。

(X)HTMLコード

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

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;
}

参考サイト

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事