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

First Item

Solution 1:

You are aligning texts in the body.

Try this:

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

<h4align="center">HEADLINE</h4><olclass="center"><li>First Item</li></ol>

Solution 2:

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

CSS:

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

HTML

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

Final Result would look lke this :

Solution 3:

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.

Solution 4:

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

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

Solution 5:

For an ordered list, my basic requirements are:

The list should be on its own line without any other elements adjacent to it, or any background images.
The ordered list element should be horizontally centered on the web page with the list items in vertical alignment.
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;
}

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

Learn Html5