html - 如何让我的有序列表编号在边框中间居中？

Question

我正在尝试创建一个带有边框(制作一个圆圈)的编号订单列表。我希望列表的编号在边框框中居中，边框框在段落中居中。现在这两个元素都在顶部居中(数字在边框顶部居中，而边框在段落顶部居中)。我希望边框(圆圈)随段落大小进行调整。因此，如果我的段落占用 3 行，那么圆圈将位于这三行的中间。如果它占用 5 行，那么圆圈将出现在这 5 行的中间。

HTML

  <ol>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </li>
    <li>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </li>
    <li>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li> 
  </ol>

CSS

li{
margin-top: 20px;
margin-right: 30%;
font-size: 20px;
}

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}

ol > li {
    position:relative; /* Create a positioning context */
    margin:0 30% 20px 4.5em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
}

ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top: 0px;
    left:-2.5em;
    margin-right:8px;
    padding:4px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
    color:#fff;
    background:blue;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

Answer 1

您可以通过在 CSS 中为 :before 伪元素添加以下内容来实现您正在寻找的内容:

ol > li:before {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

将顶部设置为 50% 会将元素的位置从顶部移动一半，但基于元素的顶部。

设置变换:translateY(-50%);会将元素向上移动其自高度度的 50%，从而真正使元素居中。

(您可以在此处查看如何在垂直和水平方向上执行此操作的示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform)

其中的最后一种样式使用 flex box 使数字在圆圈内垂直和水平居中。

(更多关于 flex box 的信息:https://www.w3schools.com/css/css3_flexbox.asp)

澄清一下，您应该保留所有已有的样式，只需添加这些新样式就可以了!