当 <li> 元素之一包含 <img> 和文本时，使文本在 `<li>` 中居中

Question

我有一个像这样的简单列表：

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

我想做的是将所有文本居中，使用 li {text-align: center;} 可以轻松完成，但我发现最后一个列表项中的 <img> 元素有问题，它使该列表项并使其与所有其他项不一致，知道我如何解决这个问题以便所有文本都排成一行并且 arrow 位于单词 [=24= 的左侧] 而不会扭曲居中列表。

我在这里做了一个问题的 JSFiddle：http://jsfiddle.net/rsswou6e/1/

Answer 1

如果这是您想要的，则不是肯定的 - 它看起来接近中心），但您可以像这样将文本和图像居中：将 img 放在 span

  <li><span><img src="http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png" height="10"> RETURN</span></li>

查看更新后的 Fiddle:http://jsfiddle.net/rsswou6e/2/

Answer 2

可以添加一些css属性将img从li定位移出：

li > img {
    padding-right: 20px;
    margin-left: -20px;
    position: absolute;
}

当 <li> 元素之一包含 <img> 和文本时，使文本在 `<li>` 中居中

Keep text centred in an `<li>` when one of the <li> elements contains an <img> and text

html

css

html-lists