Tag ホームページ

2009/12/04 ulとliの中央揃えCSS

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

<div id="menu">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
</div>

CSS

<style type="text/css">
<!--
.#menu {
	position: relative;
}
#menu ul {
	list-style-type: none;
	position: relative;
	left: 50%;
	display: inline;
	float: left;
}
#menu li {
	display: inline;
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	position: relative;
	left: -50%;
}
-->
</style>

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