リストの点を左揃えし中心に寄せる方法

Question

リストの点を左揃えし、中心に寄せたいのですが、思い通りに行きません。

<div class="center">
  <ul>
    <li>list1</li>
    <li>list2</li>
  </ul>
</div>

.center {
  text-align: center;
}

これでうまく行くかと思ったのですが、テキストのみ中心に寄せられるのです。
リストの点とテキストの始まりを揃えた中心寄せにできますか？

Answer 1

ulはブロック要素なので、インラインブロック要素にすればdivのtext-align:center;が効くようになります。
また、liにtext-align:left;を指定することで、リストは中央寄せのままテキストを左寄せにできます。

.center ul {
    display: inline-block;
}
.center li {
    text-align: left;
}

Comments

[Daregada]

こっちのほうがエレガント。
ただ、li要素の内容の幅が不均一な場合に備えて、
.center li { text-align: left; }
としておくべきかも。

[nelpesica]

.center li { text-align: left; }
↑はそのとおりですね。
これがないとリスト内のテキストが中央のままなので必要ですね。
補足ありがとうございます！

Answer 2

widthの調整が面倒ですが。

.center li {
    width: 2.5em;
    margin: 0 auto;
    border: green solid 1px; /* 確認用 */
}

Comments

[_beg]

なるほど…ありがとうございました！