list-style-image not working properly in chrome

Question

I have a simple list and want to use list-style-image to set the images for the list-items. I have set text-align: center on the list items because i want the list items to be on the center of the screen along with the list-images.

This works exactly how I want it to work in firefox. But in chrome the list-style-images are aligned to the far-left of the screen. Any idea why this is caused and how can I fix this bug on chrome?

I have made a JSFiddle here and you can see how i want it to appear on firefox and the issue on 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; will work well both for Chrome and Firefox.

Answer 2

Just remove list-style-position:outside and add list-style-position:inside to get the images and text on centre .

Check this out...

 .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>