如何在各种浏览器中垂直居中自定义图像在<li>元素中？

Question

我正在开发的网站需要在列表中使用自定义图片而不是标志符。使用图片没有问题，但是我在确保它在所有浏览器上与列表项文本居中方面遇到了困难。有人知道这个问题的标准解决方案吗？

- Travis

Answer 1

如果您要使用自定义图像符号来制作列表，这是您需要使用的代码，它将垂直居中。我在这里假设符号图像为12px x 12px。

ul li {
  background: transparent url(/link/to/custom/bullet.gif) no-repeat 0 50%; 
  padding-left: 18px; 
}

这样做的唯一问题是，有时在长的多行列表项上看起来很奇怪。在这种情况下，最好将背景位置分配到距离顶部和左侧略微缩进的位置（即no-repeat 0 7px）。

谢谢，Bruce

- Bruce Clark

Answer 2

在li元素上设置特定的行高和图像的垂直对齐方式... 对我有用

li { height: 150px; line-height: 150px; }
li img { vertical-align: middle; }

以及HTML代码

<li><img src="myimage.jpg" /></li>

如果您想将图像适应到自定义大小并保持比例

li img { max-width: 150px; max-height: 150px; width: auto; height: auto; }

- dottwatson

Answer 3

你尝试过在CSS文件中添加以下代码吗？

li
{
   background-image: URL('custom.png');
   background-repeat: no-repeat;
   background-position: center;
}

- Dillie-O

---

自定义的项目符号不是li元素的背景图像。 - Dereckson