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

Question

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

Answer 1

如果您指的是为列表使用自定义图像项目符号，则这是您要使用的代码，它将垂直居中。我在这里假设子弹图像是12像素×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元素上设置特定的行高，在图像上设置vertica对齐..为我工作

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