将自定义 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

你的思路是对的。只有代码有错别字。

如果我理解正确，那么结果应该如下（运行 sn-p 并通过抓住它的右下角来调整块的大小）：

• 使用 flex 和 transform

.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 fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 15 15 19 10 19C5 19 1 15 1 10C1 5 5 1 10 1C15 1 19 5 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  height: 20px; width: 20px;
  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 fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L9 12L13 8M19 10C19 15 15 19 10 19C5 19 1 15 1 10C1 5 5 1 10 1C15 1 19 5 19 10Z' stroke='%2396D8A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: absolute;
  top: 50%; left: 0;
  height: 20px; width: 20px;
  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>