将列表文本与项目符号图标的中心对齐

Question

尝试将列表文本与无序列表中项目符号的 svg 图标对齐。

尝试了互联网上的很多可用解决方案，但设置

vertical-align: middle

没有执行任何操作，并且出于某种原因将

display: flex; align-items: center;

设置为父元素会删除图标。 任何帮助将不胜感激。

我在 React 中完成了此操作，但 React 部分工作正常（我认为？），因此发送 HTML 和 CSS 片段。 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>
              <span className="list-text">
                Product discovery and building what matters
              </span>
            </li>
            <li>
              <span className="list-text">
                Measuring to ensure updates are a success
              </span>
            </li>
            <li>
              <span className="list-text">And much more!</span>
            </li>
          </ul>
        </div>
      </div>
      <div className="form-image-container">
        <SignUpImageDesktop className="form-image" />
      </div>
    </div>

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-image: url("../assets/images/icon-list.svg");
  padding-left: inherit;
}

.form-text ul li {
  line-height: 2rem;
}

.list-text {
  padding-left: 0.5rem;
  font-size: 16px;
}

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

输出就像- 注意子弹。

Answer 1

您可以尝试从

line-height

中减少

.form-text ul li

，或者更好的是，不要使用

list-style-image

。

更好的方法可能是将

before

与

content: url()

一起使用，像这里（只需将

after

更改为

before

）

有了这个，您可以使用

display: flex;

和

align-items: center

来对齐所有内容