列表樣式圖片在Chrome中無法正常工作

Question

我有一個簡單的列表，想使用list-style-image設置列表項的圖像。 我已將text-align：設置在列表項的中心，因為我希望列表項與列表圖像一起位於屏幕的中心。

這正是我希望它在Firefox中工作的方式。 但是在chrome中，列表樣式的圖像與屏幕的最左端對齊。 知道為什么會導致這種情況，如何在Chrome上修復此錯誤？

我在這里做了一個JSFiddle，您可以看到我希望它出現在firefox上以及chrome上的問題：
https://jsfiddle.net/jhchmo5w/1/

<div class="discover-content">
   <ul>
    <li>List Item 1</li>
    <li>List Item Item 2</li>
    <li>List Item Item Item 3</li>
    <li>List 4</li>
    <li>List Item b 5</li>
    <li>List Item cd 6</li>
   </ul>
</div>

.discover-content ul li {text-align: center;}
.discover-content ul li {
            margin-top: 9px; 
            padding-left: 12px;
            list-style: none;
            list-style-position: outside;
            list-style-image: url(http://www.expertfrontend.com/icons/tick-red.png);
             text-align: center;
        }

Answer 1

list-style-position: inside; 適用於Chrome和Firefox。

Answer 2

只需刪除list-style-position:outside並添加list-style-position:inside即可使images and text位於centre 。

看一下這個...

 .discover-content ul li { text-align: center; } .discover-content ul li { margin-top: 9px; padding-left: 12px; list-style: none; list-style-image: url(http://www.expertfrontend.com/icons/tick-red.png); list-style-position: inside; text-align: center; } 

 <div class="discover-content"> <ul> <li>List Item 1</li> <li>List Item Item 2</li> <li>List Item Item Item 3</li> <li>List 4</li> <li>List Item b 5</li> <li>List Item cd 6</li> </ul> </div>