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 · ベストアンサー

.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はインライン要素に対する中央揃えなので、ブロックレベル要素には効かない。
そこで、インライン要素に表示のみ変えたのが、上記。

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

お礼

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

回答No.2

kobliha

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

お礼

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