CODEWITHSUNDEEP
htmllistalignment
Nikolas
Nikolas

Reputation: 557

How to center ordered list number in HTML

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

If I put like this:

<html>
<body align="middle">
HEADLINE
<ol>
<li>First Item</li>
</ol>
</body>
</html>

The problem is the number (1.) is on the left when I wanted it to be aligned under the headline. How can I get the whole list item to the middle?

I need atleast 10 reputation to add pictures so I'll provide a link to another website for you to see the picture: ALIGNING

Upvotes: 38

Views: 143188

Answers (5)

Bert Houser
Bert Houser

Reputation: 61

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>

Upvotes: 4

Shomeek Basu
Shomeek Basu

Reputation: 49

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 : Output

Upvotes: 3

Godsayah
Godsayah

Reputation: 144

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>

Upvotes: 1

Nuno Duarte
Nuno Duarte

Reputation: 1026

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>

Upvotes: 87

Halie
Halie

Reputation: 11

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.

Upvotes: 1

Related Questions