段落を左よせしつつ配置はセンター

質問

段落を<ul><li>・・・</li><li>???</li></ul>
こんな感じで作りましたが、
これを真ん中に配置したいのですが、
そうすると文章が複数行あるのですが
それが行頭を無視して全部真ん中によってしまうので
文章は綺麗に左寄せされつつ、全体を真ん中に
配置する方法をご存知の方教えていただけるとありがたいです。

回答No.1

345itati · ベストアンサー

CSSで、
ul {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
幅widthは%でもpxでもいいからかならず指定しないと、margin: auto;によるセンタリングが有効にならないので注意。
後、IE6以前ではDOCTYPE宣言できっちり標準準拠モードにしておかないと、この記述ではセンタリングされないという苛つくバグがあるので更に注意。IE5.5以前ではそもそもこの記述でセンタリングされない仕様だし・・・

とどのつまりどっちかといえば、<ul>自体を汎用ブロックレベル要素<div>でくくって
<div class="box"><ul><li>あああ</li><li>いいい</li></ul></div>
CSSでdivをセンタリングし、ul自体はtext-align: left;で左寄せ指定が一番安定かもしれません。
.box {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center; /*IEのバグによるセンタリングの為入れる*/
border: none;
}
ul li{
text-align: left;
}
で段落自体はセンタリングで文章は左寄せになるかと。。。