如何使有序列表数字居中显示在边框框中？

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;
}

- Kevin

Answer 1

您可以通过为:before伪元素添加以下内容来实现您想要的效果：

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

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

设置transform: 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）

为了澄清，您应该保留所有已有的样式，只需添加这些新样式即可。

- bizlin

Answer 2

试试这个。

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 */
    display: inline-flex;
}

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;
    height: 100%;
    align-self: center;
    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;
    line-height: 50px;
}

<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. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi expedita quis quod obcaecati laborum ducimus quibusdam similique dolorem eum exercitationem!
    </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
      Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Sed nam incidunt nobis temporibus? Ut, ullam, alias. Sit minima ratione libero modi expedita est? Iste, at. Voluptatibus veritatis tenetur nostrum ducimus tempora voluptas veniam labore incidunt. Possimus ullam cupiditate mollitia dolores adipisci officia minima voluptatem, dignissimos eaque doloremque dolorum iusto praesentium tempora optio est tenetur, consectetur quaerat ipsum voluptatibus. Doloremque, harum. Ut voluptatum harum dolorem ad libero sunt magnam, itaque cum iusto tempora repellendus aspernatur, provident, voluptatibus facere et reiciendis neque ducimus, velit sequi ipsa nesciunt perspiciatis iure. Deleniti commodi exercitationem voluptate ipsum vitae hic odio impedit. Rerum veniam, et quos.
    </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>

- jasdev

Answer 3

如果您想要在垂直方向上将某些内容居中对齐，有几种方法可以实现。例如，您可以尝试给父元素设置 flex 或 grid 属性，然后在子元素上应用属性，如 place-items: center（grid）或 align-items: center（flex）。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

另一种方法是将父元素的位置设置为相对定位，然后将子元素的位置设置为相对或绝对定位，并将其从顶部移动50％，然后使用transform: translateY（-50％），它将元素移动到父元素高度的50％处，然后将子元素向上移动其高度的50％，使其在垂直方向上完美居中。

我通过将伪元素更改为display：grid，添加place-items：center（它是align-items：center和justify-items：center的简写，可将before元素的内容居中），并添加top：50％和transform：translateY（-50％）来实现了您的目标，正如我上面所解释的。

此外，您可以考虑在伪元素（如::before和::after）之前写两个分号，而不是一个。您可以在这里阅读有关此问题的更多信息：

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

这是可用的CSS代码：

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;
    display: grid;
    place-items: center;
    top: 50%;
    transform: translateY(-50%);
    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;
}

- Szarlej