This forum is now read-only. Please use our new forums at discuss.codecademy.com.

154 points

Submitted by
Daniel
almost 5 years ago

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?


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.

9061 points

Submitted by
Roy
almost 5 years ago


0 votes

permalink

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

154 points

Submitted by
Daniel
almost 5 years ago


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.

3095 points

Submitted by
stetim94
almost 5 years ago

1 Comment

Roy almost 5 years ago

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.


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.

3095 points

Submitted by
stetim94
almost 5 years ago

2 Comments

Roy almost 5 years ago

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 almost 5 years ago

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


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
almost 5 years ago

2 Comments

Roy almost 5 years ago

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

stetim94 almost 5 years ago

you're welcome