如何使用行内CSS实现图片列表标记旁文本垂直居中

实现方案 #

不要使用list-style-image属性，该属性无法控制图片的垂直对齐位置，改用背景图+flex行内样式实现，兼容多行文本场景，代码如下：

<ul style="padding-left: 0; list-style: none;">
  <li style="padding-left: 120px; background: url('/assets/images/thumb.jpg') left center/100px auto no-repeat; min-height: 80px; display: flex; align-items: center;">
    I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines
  </li>
</ul>

参数调整说明

• padding-left：设置为比图片宽度大20px左右即可，给图片预留显示空间
• background属性里的left center控制图片左对齐、垂直居中，100px auto设置图片显示宽高，可根据你的实际图片尺寸调整
• min-height设置为和图片实际高度一致即可
• display: flex; align-items: center保证多行文本整体和图片垂直居中，换行不会出现行高异常问题

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