如何调整列表项垂直位置以匹配自定义项目符号图片？

你的问题是用list-style-image设置自定义项目符号后，文本和图标垂直不对齐（文本偏下）；而用伪元素:before的方案虽能对齐，但破坏了换行后的文本对齐。下面给你两个可靠的解决方法：

方法一：Flexbox布局实现完美对齐 #

利用CSS Flexbox的垂直居中特性，同时通过内边距给图标预留位置，确保换行文本对齐：

.card {
    height: 100%;
}
.card-body {
    padding: 2em;
}
.feature-list {
    list-style: none; /* 移除默认项目符号 */
    padding-left: 0;
}
.feature-list li {
    display: flex;
    align-items: center; /* 强制图标与文本垂直居中 */
    padding-left: 2.5rem; /* 为图标留出左侧空间，根据实际尺寸调整 */
    position: relative;
    margin-bottom: 0.8rem; /* 可选，调整列表项间距 */
}
.feature-list li:before {
    content: '';
    background-image: url(/images/check-lg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.5rem; /* 设置图标宽度，根据实际尺寸调整 */
    height: 1.5rem; /* 设置图标高度，根据实际尺寸调整 */
    position: absolute;
    left: 0;
}

原理： #

• display: flex + align-items: center 让图标和文本在垂直方向上严格居中
• 绝对定位的伪元素图标固定在列表项左侧，padding-left 让文本从图标右侧开始排列，换行时自然对齐首行

方法二：定位+Transform垂直居中 #

如果不想用Flexbox，也可以通过绝对定位和位移来实现垂直居中，同时修复换行对齐：

.card {
    height: 100%;
}
.card-body {
    padding: 2em;
}
.feature-list {
    list-style: none;
    padding-left: 0;
}
.feature-list li {
    position: relative;
    padding-left: 2rem; /* 图标宽度+间距，根据实际调整 */
    line-height: 1.6; /* 匹配图标高度，确保垂直对齐更自然 */
}
.feature-list li:before {
    content: url(/images/check-lg.png);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 让图标自身垂直居中 */
}

原理： #

• top: 50% + transform: translateY(-50%) 是垂直居中的经典技巧，不管图标高度变化都能生效
• 列表项的padding-left 确保文本始终在图标右侧，换行时不会跑偏

为什么原来的方案不行？ #

• list-style-image 的垂直对齐由浏览器默认控制，不同浏览器处理逻辑不一致，很难精准调整
• 你之前找到的:before方案用了相对定位top:6px，但没有给文本预留左侧缩进，导致换行后文本无法对齐首行

内容的提问来源于stack exchange，提问作者Jonathan Wood