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

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

まぁくんの店のアカウントをフォローする

下記はまぁくんの店の情報です
記す
大阪府 四條畷市 まぁくんの店(印鑑・名刺・印刷 ホームページ作成 SEO対策)

茶道日記

ipad&Wordpress