floatで並べた要素を中央揃え

| コメント(0) | トラックバック(0)

floatでブロック要素を並べると、普通は右(float:right)か左(float:left)かどちらかにしか揃えることが出来ません。真ん中に揃えるには、position:relativeでうまく位置調整してあげます。

■HTML
<div class="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;
}

トラックバック(0)

トラックバックURL: http://passandgo.jp/cms/mt-tb.cgi/14

コメントする

このブログ記事について

このページは、ナックルが2009年7月24日 02:47に書いたブログ記事です。

ひとつ前のブログ記事は「URLの「www」ありなしの統一」です。

次のブログ記事は「WEBページのURLに「.html」を付ける」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。