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

Question

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

Answer 1

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

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

唯一的问题是,有时在长多行列表项上看起来很奇怪.在这种情况下,最好将背景位置指定为从顶部和左侧稍微缩进(即不重复0 7px).

欢呼,布鲁斯