如何讓我的有序串列編號在邊框中間居中？

我正在嘗試創建一個帶有邊框的編號訂單串列（制作一個圓圈）。我希望串列的編號在邊框框中居中，邊框框在段落中居中。現在這兩個專案都居中在頂部（數字居中在邊框框的頂部，邊框框在段落的頂部居中）。我希望邊框（圓圈）隨著段落大小進行調整。因此，如果我的段落占用 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;
}

uj5u.com熱心網友回復：

您可以通過將以下內容添加到 :before 偽元素的 CSS 中來實作您正在尋找的內容：

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 ）

那里的最后一個樣式使用彈性框將數字在圓圈內垂直和水平居中。

（更多關于彈性盒子的資訊：https ://www.w3schools.com/css/css3_flexbox.asp ）

為了澄清您應該保留所有已有的樣式，只需添加這些新樣式就可以了！

uj5u.com熱心網友回復：

嘗試這個。

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>

uj5u.com熱心網友回復：

如果你想垂直對齊中間的東西，有幾種方法可以做到這一點，例如，你可以嘗試給父顯示 flex 或 grid，然后應用到子屬性，如 place-items：center (grid) 或 align-專案：中心（彈性）。

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

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

另一種方法是給父級相對位置，然后相對子級定位相對或絕對位置，并將其從頂部移動 50%，然后變換：translateY(-50%)，它將元素開始移動到父級高度的 50%然后將孩子向上移動 50% 的高度，使其垂直居中。

我通過將 before 偽元素更改為 display: grid, added place-items: center 什么是 align-items: center 和 justify-items: center 的簡寫來實作您的目標，該中心將 before 元素的內容居中并添加頂部： 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;
}

標籤：html css

上一篇：表格行上的底線分隔符全寬

下一篇：如何使用CSS:target選擇器創建可重用的模式框