How to center ordered list number in HTML

Nikolas, aligning the numbers on an ordered list in CSS is as follows:

     ol
    {
       display: inline-block;
       margin-left: auto;
       margin-right: auto;
    }

**You must use a display-block because you need to put your list in a box for it to center the numbers with the list.

You are aligning texts in the body.

Try this:

.center {
  text-align: center;
  list-style-position: inside;
}

<h4 align="center">HEADLINE</h4>
<ol class="center">
  <li>First Item</li>
</ol>

For an ordered list, my basic requirements are:

1. The list should be on its own line without any other elements adjacent to it, or any background images.
2. The ordered list element should be horizontally centered on the web page with the list items in vertical alignment.
3. The list item markers should be inside the list.

Using DuckDuckGo, I used the following search statement: "How to horizontally center an ordered list on a web page"

It returned the first entry which has the following link, https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

The article offers placing the list element as a child of a div element, then having the specification "display: table;" in the CSS for a div element.

I saw other solutions using "text-align: center;" in the CSS for the tag. This approach horizontally centers each list item on the page and does not vertically align the list markers.

Below is my implementation without the div element. The CSS horizontally centers the list on the page.

ol.center-list{
  display: table;
  margin-left: auto;
  margin-right: auto;
  list-style-position: inside;
}

<ol class="center-list">
   Ordinal Number Words
   <li>first</li>
   <li>second</li>
   <li>third</li>
   <li>forth</li>
</ol>

This is very old post but this this is the solution I did.

CSS:

.center
{
 text-align: center;
 list-style-position: inside;
}
ol.center li
{
 text-align: left;
 margin-left: 45%;
}

HTML

<ol class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, repellat.
<li>List1<li>
<li>List2<li>
</ol>

Final Result would look lke this :