将自定义 svg 列表项项目符号点与文本垂直对齐

Question

我已经根据此中的建议答案创建了一个自定义 SVG 项目符号图标，现在我正在尝试“垂直对齐”li 项目符号点，使其垂直居中项目文本。

这里是当前结果，显示带有自定义 svg 项目符号点的列表：

预期结果：项目符号图标与每个 li 的文本“居中对齐”

我已经尝试了多种排列方式来执行此操作，特别是引用了 here, here, and 中的代码，在每次尝试的情况下，当我刷新页面（本地文件）进行更改时，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

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

如果我没理解错的话，结果应该是这样的（运行 snippet and resize block by grabbing it by the lower corner):

使用 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>

将自定义 svg 列表项项目符号点与文本垂直对齐

Vertically aligning custom svg list item bullet points with text

html

css

html-lists