列表项标记垂直对齐[重复]答案

【问题标题】：list item marker vertically aligned [duplicate]列表项标记垂直对齐[重复]
【发布时间】：2022-02-18 07:11:43
【问题描述】：

我有一个这样的列表：

<ul>
  <li>item 1
    <hr>rest of text</li>
  <li>item 2</li>
</ul>

项目 1
其余文字
项目 2

我的问题是第一个项目标记的定位，它将位于第一行的开头。我希望它根据项目占据的整个高度垂直对齐

【问题讨论】：

@diyarazhir 一张你想要达到的目标的图片会让它更清晰。
当您提出问题时，非常不清楚，因为您说您有垂直对齐问题，但不清楚是什么。代码完全按预期呈现。所以我建议在它关闭之前用更多细节（可能是标记图像）更新它。
他希望第一个 li 项目的项目符号点在项目前面垂直居中。这是通过重复发布的问题的答案来实现的。

标签： html css

【解决方案1】：

基于 Vertical align custom bullets to the middle of the list content 中 Paulie-D 的工作，如果您将 display: flex 用于 <li>：

ul {
    list-style: none;
}

li {
    display:flex;
    align-items:center;
    border: 1px solid lightgrey;
}

li::before {
    content: "•";
    width: 1.2rem;
    text-align: left;
    vertical-align: middle;
}

<ul>
    <li>
        <div>
            item 1
            <hr>rest of text
        </div>
    </li>
    <li>item 2</li>
</ul>

相关渲染的宽度裁剪屏幕截图：

(Pretend code required here because of the link to codepen)

【讨论】：

【解决方案2】：

这当然不是最动态的方法，但是通过将内容嵌套在列表项中，然后定位它们，您将能够将文本与项目符号对齐（而不是项目符号与文本对齐）。然后您需要更改受影响的<li> 的高度以考虑创建的空间：

.list1 {
  height: 40px;
}

.containment {
  position: relative;
  top: -20px;
}

<ul>
  <li class="list1">
    <div class="containment">
      item 1
      <hr/> rest of text
    </div>
  </li>
  <li class="list2">
    item 2
  </li>
</ul>

【讨论】：