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ピクセルとってます