I have a basic list structured like this:
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
<li><hr></li>
<li><img src="http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png" height="10"> RETURN</li>
</ul>
My goal is to center all the text in the list, which can be achieved by using li {text-align: center;}. However, I am encountering an issue with the <img> element in the last list item. It causes that particular item to appear misaligned compared to the others. Is there a way to keep all the text aligned while having the arrow positioned to the left of the word RETURN without affecting the centered list layout?
I have created a JSFiddle illustrating the problem here: http://jsfiddle.net/rsswou6e/1/