初心者です。どなたかお助けくださいませ！
以下のサイトにある設定ですが、どういう理屈で li 全体が中央寄せになるのか、イマイチ理解できません。
=======================================
「CSS：ulのリストをfloatで並べて中央揃えする方法」
http://raining.bear-life.com/css/ul%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92float%E3%81%A7%E4%B8%A6%E3%81%B9%E3%81%A6%E4%B8%AD%E5%A4%AE%E6%8F%83%E3%81%88%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
「position:relativeを使ってfloatしたボックスを中央寄せにする方法」
http://delaymania.com/201110/web/float_position_relative/
=======================================
また、ulを括る親要素に指定してある
position: relative;
overflow: hidden;
の「 position: relative;」を外しても効くんですが、
この設定はする必要があるのでしょうか？
よろしくお願いいたします！！
みんなの回答 6 件
わからん。俺はいつもbox-pack:center;を使うからこんなやり方わからん。
まずfloatのルールを確認しましょう。
たぶんそうすれば解決しますよ。
liをdisplay:inline-blockにしてからのulにtext-align:centerは？
たぶん、こんな感じだと思う。
■div（ulの親要素）
position:relativeはたぶんIE6とか古いIEで表示がおかしくなるか指定してるだけ。
■ul
ulには幅を指定していないので、floatをしないと親要素と同じ幅になる。
それでは困るので、ulをfloatすることで、内包する要素の幅（この場合はliを横に並べた幅と同じ）にする。
ul横幅 = li横並びの幅 になる。
position:releativeのleft:50%を指定することで、親要素の真ん中の位置からulを表示するようにする。
■li
ただ、真ん中の位置から表示されるとulの半分の幅が右によって困る。
だからliにposition:reatieのleft:-50%を指定することで、ulを基点に左に半分の幅を移動して中央に表示してる。
liのfloat:leftはliを横並びにするために指定
今時の若い制作者は、IEのhasLayout問題とか知らんか。
この程度のことを自分で調べられないならやめたほうがいいです
関連するトピックス