如何实现无序列表文本与SVG项目符号图标垂直居中对齐

问题出在使用list-style-image时，浏览器对它的垂直对齐控制非常有限，而给<li>加flex布局会让默认的列表符号失效。换个思路，把SVG图标直接嵌入<li>内部，用flex布局实现精准对齐：

修改后的React HTML代码 #

<div className="registration-form">
  <div className="form-text-container">
    <div className="form-text">
      <h1>Stay Updated!</h1>
      <p>Join 6000+ product managers receiving monthly updates on:</p>
      <ul>
        <li>
          {/* 可替换为你的SVG组件或img标签 */}
          <svg className="list-icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.03 2.36a.75.75 0 0 1 0 1.06l-11.5 11.5a.75.75 0 0 1-1.06 0L2.6 9.81a.75.75 0 0 1 1.06-1.06L5.75 10.7l10.12-10.12a.75.75 0 0 1 1.06 0Z" fill="#FF6155" fillRule="nonzero"/>
          </svg>
          <span className="list-text">
            Product discovery and building what matters
          </span>
        </li>
        <li>
          <svg className="list-icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.03 2.36a.75.75 0 0 1 0 1.06l-11.5 11.5a.75.75 0 0 1-1.06 0L2.6 9.81a.75.75 0 0 1 1.06-1.06L5.75 10.7l10.12-10.12a.75.75 0 0 1 1.06 0Z" fill="#FF6155" fillRule="nonzero"/>
          </svg>
          <span className="list-text">
            Measuring to ensure updates are a success
          </span>
        </li>
        <li>
          <svg className="list-icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.03 2.36a.75.75 0 0 1 0 1.06l-11.5 11.5a.75.75 0 0 1-1.06 0L2.6 9.81a.75.75 0 0 1 1.06-1.06L5.75 10.7l10.12-10.12a.75.75 0 0 1 1.06 0Z" fill="#FF6155" fillRule="nonzero"/>
          </svg>
          <span className="list-text">And much more!</span>
        </li>
      </ul>
    </div>
  </div>
  <div className="form-image-container">
    <SignUpImageDesktop className="form-image" />
  </div>
</div>

如果你的SVG是本地文件，也可以用<img className="list-icon" src="../assets/images/icon-list.svg" alt="check" />替代内联SVG。

修改后的CSS代码 #

.registration-form {
  display: flex;
  height: 60vh;
  width: auto;
  padding: 2.5%;
}

.form-text {
  padding: 6%;
}

.form-text p {
  line-height: 1.5rem;
  font-size: 16px;
}

/* 移除默认列表样式 */
.form-text ul {
  list-style: none;
  padding-left: 0;
}

/* 用flex实现图标与文本垂直居中 */
.form-text ul li {
  display: flex;
  align-items: center;
  line-height: 2rem;
  margin-bottom: 0.5rem; /* 可选：调整列表项间距 */
}

.list-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem; /* 保持原文本间距 */
}

.list-text {
  font-size: 16px;
}

.form-image {
  height: 100%;
  width: auto;
}

原方法无效的原因 #

• vertical-align: middle对list-style-image不生效：这个属性的对齐逻辑由浏览器内部控制，无法通过常规CSS调整。
• 给<li>设置display: flex后图标消失：flex布局会隐藏默认的列表符号（包括list-style-image），这是布局特性导致的。

通过将图标嵌入<li>内部，用flex的align-items: center就能完美实现文本与图标的垂直居中对齐，同时保留自定义图标样式。

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