How to get my ordered list numbers centered in the middle of border box?

user_8172407 0
Viewed 31

I am trying to create a numbered order list that has a border around it (making a circle). I want the number of the list to be centered in the border box and the border box to be centered within the paragraph. Right now both items are centered at the top (the number is centered to the top of the border box and the border box is centered at the top of the paragraph). I want the border box (circle) to adjust with the paragraph size. So if my paragraph takes up 3 lines then the circle will be in the middle of those three lines. If it takes up 5 lines, then the circle will appear in the middle of those 5 lines.

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;
}
css html
3 Answers

You can achieve what you're looking for by adding the following to your CSS for the :before pseudo element:

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

Setting top to 50% will shift the position of the element halfway from the top, but based on the top of the element.

Setting transform: translateY(-50%); will shift the element back up by 50% of its own height, thus truly centering the element.

(You can see an example of how to do this both vertically and horizontally here: https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform )

The last styles in there use flex box to vertically and horizontally center the number within the circle.

(More on flex box here: https://www.w3schools.com/css/css3_flexbox.asp )

To clarify you should keep all the styles you already have, just add these new styles and you should be good to go!

user_153968650

Try this.

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>

user_191684530

If you want to align something in the middle vertically there are several ways to do that, for example you can try to give parent display of flex or grid and then apply on the children properties like place-items: center (grid) or align-items: center (flex).

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

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

Another way is to give the parent position relative and then position relative or absolute to the child and move it 50% from the top, and then transform: translateY(-50%), it moves an element start to the 50% of parent height and then moves child 50% of its height up so its perfectly centered vertically.

I managed to achieve your goal by changing the before pseudoelement to display: grid, added place-items: center what is a shorthand for align-items: center and justify-items: center that centers a content of that before element and added top: 50% and transform: translateY(-50%) what I explained above.

Also you may think about writing two semicolons instead of one before the pseudoelements like ::before and ::after, you can read about it here:

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

Here is the working CSS code:

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