How to center ordered list number in HTML

Question

I am currently learning HTML programming. I have a problem:

If I put like this:

HEADLINE



        

Answer 1

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 :

Answer 2

Further to Nuno Duarte's answer you can add breaks after list numbers which (I think) makes it look better in centered mode. (disclaimer: Not tested across browsers)

.text-center {
    text-align: center;
}
ol.text-center {
    list-style-position: inside;
    padding-left: inherit; /*Get rid of padding to center correctly*/
}
    ol.text-center > li::before {
        content: "\A";
        white-space: pre;
    }

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

Answer 3

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>

Answer 4

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.