floatで横並びさせたリストをセンタリングするときの方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページネーションなどのlistをfloatさせた要素をセンタリングするときのメモです。 ナビゲーションやページネーションなどでliタグをfloatさせて横並びにすることがよくあると思います。 しかし、センタリングしようと思っても「margin:0 auto;」も「text-align:center;」も効きませんよね？ こんなとき、「position:relative;」を使うと上手くいくようです。 コード 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 { float
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
