ブログ練習帳ナビゲーションメニューなどlistをfloatさせたものをセンタリングさせたい

ナビゲーションメニューなどlistをfloatさせたものをセンタリングさせたい

ナビゲーションとかで、リストでマークアップしたものをフロートで横一列に並べて、なおかつセンタリングしたいということ、あります。単に、テキストのみのリンクメニューだったりして、とくに領域を確保させたり、画像を使ったりする必要がなければ、そもそもフロートを使わなくて、いいです。liに対して、display:inlineを指定してやればOKです。ulにtext-algin:centerとかつけてやれば、それでセンタリングできます。でも、画像使ったバナーを並べたいとか、背景色をつけたリンクメニューにしたいからdisplay:inlineを指定できない、といった場合も多いです。そうすると、そのulをセンタリングするのって、大変です。なにせ、margin:autoを使いたくても、widthが指定されていないと、margin:autoは反応してくれません。

ナビゲーションをセンタリング

てな場合に使えるのが、この方法です。

HTML


<div id="wrapper">

  <ul id="linklist">

  <li><img src="btn01.gif" width="116" height="46" alt="" /></li>

  <li><img src="btn02.gif" width="116" height="46" alt="" /></li>

  <li><img src="btn03.gif" width="116" height="46" alt="" /></li>

  </ul>
</div>

CSS


*{
	margin:0;
	padding:0;
}

ul#linklist {
	float:left;
	position:relative;
	left:50%;
	list-style-type:none;
}
#linklist li{
	float:left;
	position:relative;
	left:-50%;
}

この呪文の意味を考えてみました。