将文本与基于图形的项目符号垂直对齐答案

【问题标题】：Vertically aligning text to graphics based bullets将文本与基于图形的项目符号垂直对齐
【发布时间】：2011-07-21 15:13:17
【问题描述】：

请参阅此博客文章中的项目符号： http://www.nielsbrinch.com/managing-expectation-management/

为了使文本与基于图形的项目符号对齐，我不得不更改文本特征。我想设置与文本其余部分相同的行高 (25)，但必须将其设置为 15，以便与橙色项目符号的对齐正确。

这是项目符号的组合样式。

.post ul li {
    background: url(images/yellow-bullet.png) no-repeat 0px 4px;
    padding-left: 15px;
    font-family: Tahoma;
    line-height: 15px;
    font-size: 11pt;
    padding-top: -12px;
    margin-bottom: 10px;
    margin-left: 10px;
}

问题：如何确保文本与项目符号正确对齐，同时保持对文本特征的完全控制？

（我只想通过改变样式来做到这一点，请不要建议我改变html结构，例如在li标签中包含一个div）

【问题讨论】：

发布一个jsfiddle，我们可以帮你调试。
我以前从未使用过它 - 但它似乎有效：jsfiddle.net/SbedL

标签： css stylesheet

【解决方案1】：

list-style-image: url(images/yellow-bullet.png);

而不是

background: url(images/yellow-bullet.png) no-repeat 0px 4px;

应该这样做吗？

【讨论】：

很奇怪。 “100% 对齐”是什么意思？你能张贴你想要什么的图片吗？顺便说一句，负填充是不允许的；）
文本当前在项目符号上方一到两个像素对齐。
是的，这是因为您的图片比文字小。由于您无法指定项目符号的垂直对齐，您可以解决在图像底部添加透明空间的问题。
关于我可以纯粹使用 CSS 做什么的任何其他建议？再多的边距、内边距或定位都无法解决问题？
我不相信有办法独立控制子弹定位。基于 HTML 的项目符号基于行高居中对齐（我想）。图形的......似乎你是你自己来定位它们。 MadTheCat 关于添加透明空间的建议似乎很合适。