hail2u.net - Weblog - floatで並べたリストのセンタリング

ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

[nasunori]

お手軽

[emj1025]

floatリストのセンタリング

[rimne1190]

width100%入ってると崩れるからちゃんと確認する

[synboo]

ほー。Cool! / ul に width:100%; を指定していてこれが効かなくて少しはまった

[tadahiko_kawana]

知らなかったです。

[fugashi]

横並びリストのセンタリング

[i_am_jelly]

べんり〜

[ahiru_z]

listタグのセンタリング

[show-tima]

フッターのリストをセンタリングするところでつまづいた。この方法で解決。

[grafi]

なるほど賢い

[ko-ya-ma]

position: relative; でシンプルに実現。

[chimantare]

footerでよく使いそうな中央ならべ。

[warau-uichi]

助かりました。ありがとうございます。

[rdfrk]

よく使うのでメモ。 Reading: hail2u.net - Weblog - floatで並べたリストのセンタリング

[shin0311]

float:センタリング

[chips1029]

listのセンタリング

[Kechol]

横並べしたリストをposition: relative;でセンタリングする方法。

[willnet]

floatで並べたリストをセンタリングするときに、display:inline-blockを使う方法が一般的だがIE対応でハックを利用しないといけなくコードが煩雑になりがち。position: relative方式だとハックフリーで幸せになれる

[tan2net]

float センタリング

[k-holy]

floated listのセンタリング

[yuenana]

floatでセンタリングな。

[mayoku]

リストのセンタリング

[sayaemon]

floatで並べたリストをシンプルにセンタリングする

[aquila2005]

floatで並べたリストのセンタリング

[deg84]

floatしてもセンターリングする方法

[thiswholeworld]

使った

[raimon49]

position: relativeでリストのセンタリング

[inurota]

「各リスト項目を左に移動する時の基準はリスト全体のコンテナの左端から各リスト項目の左端までの距離になる」これは頭の良いやり方。

[htomine]

おお、シンプルでわかりやすい。

[nilab]

hail2u.net - Weblog - floatで並べたリストのセンタリング : .centered { position: relative; overflow: hidden;}.centered ul { position: relative; left: 50%; float: left;}.centered ul li { position: relative; left: -50%; float: left;}