2009 / 12 / 04ホームページ作成(CSS勉強中)

ulとliの中央揃えCSS

この記事は、バックアップの配信データから復元しました。元の本文の一部や文字が欠けている場合があります。

新しくホームページの注文が入りました
画像の変更は終わって現在ホームページの型枠作りです
メニュー項目が
少ないのでどうしようか考え中です
左にメニューを置けばいいのか？中央に置けばいいのか悩み中です
犬の画像を小さく中央に15個並べるのに
ulとliを使おうとしていますが
ulをページの中央に持ってくるのが難しい
ただ、単に中央に揃えて下に並べるのは簡単ですが
liをfloatを使って横並びにしてそれを中央に揃えるのは難しい
ul　liの中央揃えのCSS
今回は一般的な方法を記述します
html

CSS

サンプル
※
ここで必要なこと
ul
ポジション(位置）を相対的に指定すること
位置を50％で指定すること
li
ポジション(位置）を相対的に指定すること
位置を-50％で指定すること
ulをページの中央から初めてliをページの左端に設定することで
相殺して中央揃えになるという不思議なcssの設定です
他にもulの幅を指定して中央に揃える方法もあります
これだけではなく他にもいろいろと方法があるので
試してみてはどうでしょうか？
※備考
リストのスタイルはなし
liのマージンを5ピクセルとってます