早速ですが、タイトルだけではイメージがつかないと思うので下記の図をご覧ください。

このようにリストの幅を固定せず各項目は左揃えにして、
リストそのものを左右中央に配置にするという方法。

単純にtext-align:center;をやってみると、
リストそのものは当然中央配置になるが、各項目も中央揃えになってしまう。

width:200px;等と横幅を指定してmargin:0 auto;とすると、
リストの各項目左揃えでリストそのものも中央配置になる。

がしかし、横幅は200pxと固定されてしまう。じゃあどうすれば、横幅を固定せず各項目は左揃えでリスト全体を中央配置できるのか。

HTML

[html]
<div>
<h1>いろんな果物</h1>
<ul>
<li>りんご</li>
<li>柿</li>
<li>マスカット</li>
<li>スイカ</li>
<li>オレンジ</li>
</ul>
</div>
[/html]

css

[css]
div,h1,ul,li{
margin: 0;
padding: 0;
}

div{
text-align: center;
width: 300px;
height: 300px;
border: solid 1px #ccc;
}

h1{ margin-bottom: 20px;}

ul{display: inline-block;}

li{ text-align: left;}
[/css]

これでなんなく左揃えで中央配置ができます。

小ネタとして知っておくとたまーーーーーーに使うかも。

※注：IE７で動作させる場合はハックが必要です。

ulのcssの部分を変えてください。（未確認）

[css]
ul{
display: inline-block;
*display: inline;
*zoom: 1;
}
[/css]

コメント

大変申し訳ございません。
この記事はコメントは受け付けておりません。

コメントフォーム