listアイコン画像だけが中央揃えにならない

listタグでリスト化したリンクを、中央揃えするように指定したdivで囲んでいるのですが
リストアイコンの画像だけが中央揃えになってくれません。（添付画像参照）

HTMLとCSSは以下の通りです。

<div class="box">
<ul class="list01">
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

.box { text-align:center; }
ul.list01 { list-style-image: url(～); }

リストアイコンの画像もテキストと一緒に中央揃えにしたいのですが、
何かやり方があるのでしょうか？

どなたかよろしくお願いします。

No.1 ベストアンサー 回答者： DrFell 回答日時： 2013/05/18 14:11

.box { text-align:center; }

ul.list01{ list-style-image: url(～);display:inline-block;}



<div class="box">
<ul class="list01">
<li>テキスト</li>
<li>テキスト</li>
<li>テスト</li>
</ul>
</div>

text-align:centerはインライン要素に対する中央揃えなので、ブロックレベル要素には効かない。
そこで、インライン要素に表示のみ変えたのが、上記。

ただ、お勧めはしない。文字数変わるとアイコンガタガタするよ？いいのかな？

この回答へのお礼

ブロック要素だからきかなかったのですね、ありがとうございます。
分かりやすくご解説頂きありがとうございます。

お礼日時：2013/05/19 22:43

No.2 回答者： kobliha 回答日時： 2013/05/19 15:15

<li>テキスト</li>

ではなく
<li><img /> テキスト</li>
という方法もありうるが。

この回答へのお礼

ありがとうございます。
DrFellさんのやり方がと解決するようですが、ガタガタするのでおすすめしないとのことでしたので、koblihaさんのやり方で対応することも考えてみようかなと思います。

お礼日時：2013/05/19 22:44