Skip to Content
Delete Icon
This forum is now read-only. Please use our new forums at discuss.codecademy.com.
0 points
Submitted by Daniel
over 5 years

How Do I Align The Numbers of An Ordered List?

So I just learned how to align the words or phrases in an ordered list but I noticed that the actual numbers stay aligned on the left side. Is there a way to align those numbers to the left or the center as well?

Answer 55cba961d3292f827c0000db

0 votes

Permalink

As a typographical norm, lists are never center aligned. It affects their readability and is non-standard. If we are determined to center the list, then we should remove the list-style, which makes more sense on an unordered list.

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    text-align: center;
}

Bullets and numbers are actually not part of the LI, but are pseudo-elements applied :before the list item element. They take their position reference from the UL left and margin properties, as I understand it. Do some follow up reading.

9354 points
Submitted by Roy
over 5 years

Answer 55cbf1059113cb70b900028f

0 votes

Permalink

Thanks for the answer! I’ll look into it more in the future.

154 points
Submitted by Daniel
over 5 years

Answer 55cf0abdd3292fc2b20004e6

0 votes

Permalink

You can use list-style: inside; to align the numbers.

you can read more about this here, and his parent list-style

the initial value is set to outside, but i have the feeling firefox set it to inside by default. Anyway, this property gives you control of position the bullets/numers from your list.

3132 points
Submitted by stetim94
over 5 years

1 comments

Roy over 5 years

Both inside and outside are still bound to a left vertical column and will not collapse toward the center of the line. I’ve been trying to find more technical info on this, including default style sheets, but nothing so far to satisfy the OP’s requirements. Maybe I’m a little biased, since I for one cannot stand centered lists, or anything centered in excess. It goes against all the grains.

Answer 55cf9f00e39efea7bc000382

0 votes

Permalink

what do you mean with not collaps toward the center of the line?

if i have this code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>align</title>
  <style>
    li {list-style-position: inside;}
  </style>
</head>
<body>
<ol>
  <li style="text-align: left">item 1</li>
  <li style="text-align: center">item 2</li>
  <li style="text-align: right">item 3</li>
</ol>
</body>
</html>

the numbers seems to align, don’t ask me for the technical reasons. I don’t know, and don’t like this aligning much more then you, i just stumbled on this property one time by accident.

3132 points
Submitted by stetim94
over 5 years

2 comments

Roy over 5 years

Ah, thank you. I stand corrected. Being so opinionated, I didn’t explore this for many years. The jaggedness of the list is off-putting for many readers, so one would need a very good reason to typeset against the norm.

stetim94 over 5 years

I agree, but it does answer the question, which was my main concern

Answer 55d2a2599113cba370000673

0 votes

Permalink

Wow, jeez, I wasn’t expecting all this haha. I wasn’t planning on formatting lists against the norm but I was curious to know if it was possible. Thanks again!

154 points
Submitted by Daniel
over 5 years

2 comments

Roy over 5 years

You should see us when we get talking about mayonnaise on sandwiches. (jk - it’s a reference to CHUCK).

stetim94 over 5 years

you’re welcome