CSS如何解决ul自定义图标与li文本垂直居中问题

使用list-style-image为无序列表设置自定义图片项目符号时，li内文本默认与图标底部对齐，无法自动垂直居中，给ul设置flex居中属性无法修复该问题。
复现代码：

<ul class="list">
  <li>Program</li>
</ul>

.list {
    list-style-image: url('img/list-circle.png');
}

效果截图：

• list-style-image原生没有提供对齐控制属性，浏览器默认渲染逻辑是将图标底部对齐文本基线，必然会出现图标偏上、文本靠下的错位问题
• 给<ul>设置display: flex; align-items: center仅能控制ul的直接子元素（即li整体）的对齐方式，无法影响li内部项目符号和文本的相对位置，所以完全不生效

放弃使用list-style-image，改用li背景图实现自定义项目符号，对齐控制灵活，全浏览器兼容：

.list {
  /* 清除列表默认样式 */
  list-style: none;
  padding-left: 0;
}
.list li {
  /* 左侧预留图标显示空间，数值根据图标尺寸调整 */
  padding-left: 20px;
  /* 自定义图标设为背景，垂直居中、左对齐，不平铺 */
  background: url('img/list-circle.png') no-repeat left center;
  /* 控制图标显示尺寸，根据实际需求调整 */
  background-size: 12px 12px;
  /* 设置和图标高度匹配的行高，对齐效果更稳定 */
  line-height: 1.2;
  /* 如果有微小错位，可以微调背景位置，比如整体向上偏移1px就改成：
  background-position: left calc(50% - 1px);
  */
}

备选方案（仅适合现代浏览器）：如果不需要兼容老旧浏览器，可以使用::marker伪元素控制项目符号样式，但仅支持纯色字符或简单内容，复杂自定义图片适配性不如背景图方案。

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