html - 将自定义 svg 列表项元素符号与文本垂直对齐

Question

我根据此 stackoverflow post 中的建议答案创建了一个自定义 SVG 元素符号图标现在我试图“垂直对齐”li元素符号，使其与元素文本垂直居中。
这是当前 结果显示带有自定义 svg 要点的列表:

预期结果:元素符号图标与每个图标“中间对齐”li的文字
我已经尝试了如何做到这一点的多种排列，特别是引用来自 here 的代码, here , 和 here并且在每个尝试的情况下，当我刷新页面(本地文件)以进行更改时，列表中不再显示 SVG 元素符号。 (它们在页面上的任何地方都不可见)
这是我尝试过的示例:
HTML 布局:

<div class="main-container">
<div class = "list-section">
<ul>
    <li>This is my first list item, padded out for double line test!</li>
    <li>This is the second list item, also suitably padded out for testing</li>
    <li>Third item list, about same level of padding!</li>
</ul>
</div>
</div>

尝试 1

li.list-section:before{
    content: url("data:image/svg+xml, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position:relative;
    top:10px;
    left:-10px;
}

.list-section li{
    font-size: 14px;
    color: #6D6D6D;
    margin: 16px 0px;

尝试 2

.list-section li{
    list-style-image: url("data:image/svg+xml, %3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    font-size: 14px;
    color: #6D6D6D;
    margin: 16px 0px;
    position: relative;
    display:flex;
    align-items: center;
}

Answer 1

你的思路是对的。只有代码包含错别字。
如果我理解正确，那么结果应该如下(运行代码片段并通过捕获它的右下 Angular 来调整块的大小):

使用 flex 和转换

.main-container {
/* For example only */ resize: both; overflow: scroll; min-height: 100px; min-width: 100px;
}

.list-section ul {
  list-style-type: none;
  margin: 0;
}

.list-section ul li {
  position: relative;
  margin: 1em 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6D6D6D;
}
.list-section ul li::before {
  content: url("data:image/svg+xml, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translatex(-50%);
}

<div class="main-container">
  <div class="list-section">
    <ul>
      <li>This is my first list item, padded out for double line test!</li>
      <li>This is the second list item, also suitably padded out for testing</li>
      <li>Third item list, about same level of padding!</li>
    </ul>
  </div>
</div>

带位置和变换

.main-container {
/* For example only */ resize: both; overflow: scroll; min-height: 100px; min-width: 100px;
}

.list-section ul {
  list-style-type: none;
  margin: 0;
}

.list-section ul li {
  position: relative;
  margin: 1em 0;
  font-size: 14px;
  color: #6D6D6D;
}
.list-section ul li::before {
  content: url("data:image/svg+xml, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-150%, -50%);
}

<div class="main-container">
  <div class="list-section">
    <ul>
      <li>This is my first list item, padded out for double line test!</li>
      <li>This is the second list item, also suitably padded out for testing</li>
      <li>Third item list, about same level of padding!</li>
    </ul>
  </div>
</div>