css - 如何将自定义图像垂直居中跨浏览器的元素？

Question

我正在处理的网站的设计要求在列表中使用自定义图像而不是项目符号。使用图像很好，但我一直难以确保它在所有浏览器中以列表项的文本为中心。有谁知道这个的标准解决方案？

Answer 1

如果您指的是为列表使用自定义图像项目符号，这是您要使用的代码，它将垂直居中。我在这里假设子弹图像是 12 像素 x 12 像素。

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

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

干杯，布鲁斯

Answer 2

您是否尝试在 CSS 文件中添加以下代码？

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

Answer 3

在 li 元素上设置特定的 line-height 并在图像上设置 vertica align .. 为我工作

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