HTMLのリストでバレットイメージが中央に来てくれないとき

覚え書き。

liでバレットを任意のものにするときに使うstyleのプロパティ、list-style-image。
どんなに指定しても左上付きになってしまうので、困っていた。
画像自体にスペースを持たせるのはカッコ悪いしブラウザ問題にひっかかるし、
marginやpadding引っ張ってきてもあまり関係ない。

いろいろみていると、
background-imageにバレットの画像を貼って、その画像の分だけpaddingで左寄せにする方法が最も妥当だと学習しましたよ。

けれどliはブラウザによってこのバレットの位置の認識が違うので、この辺も考慮しなければいけないよね。

いやしかし、やっぱsafariはレイアウトが美しいなあ。
きたないコーディングでも、きれいに見える。
こうでないとなあ。