スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Web] float: left; で横方向の並びにした ul/li のリストをセンタリング(中央寄せ)にしたい



UL / LI でのリストを横に並べる、というのは float: left; で
左回り込みするようにしてよくやることかと思います。

で、これを中央に表示させたいのだけど、margin の設定や
text-align: center; とかではなかなかうまいこといかない。
どうしても左回り込みということで左端に行っちゃうんですよね。
(参照:↑「ふつうはこう」)

で、いろいろやり方はあるのですが、簡潔に書かれているのはこちら。

floatで並べたリストのセンタリング
http://hail2u.net/blog/webdesign/centering-floated-list.html

まあ意味はわかるのですが、いまいち腹にはまらなかったので、
枠線つけてわかりやすくしてみたのが上記のサンプル。

・外枠で位置を相対指定にさせる。
 なおかつ、中身がはみ出しそうになってスクロールバーが出てしまうのを防ぐために
 overflow を hidden にする。


・UL も相対位置にして、50%位置にする。
 これで ULの頭が真ん中になる。
 (でも頭が真ん中になっただけなので、センタリングではない)


・UL のなかの要素である LI を -50% 指定にする。
 先のULの位置から左に戻る形になり、全体的にはセンタリングされた形になる


というところですかね。
関連記事
スポンサーサイト

テーマ : web制作
ジャンル : コンピュータ

comment

管理者にだけメッセージを送る

検索フォーム
リンク
最新記事
最新コメント
カテゴリ
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。