This forum is now read-only. Please use our new forums! Go to forums
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
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.
Answer 55cbf1059113cb70b900028f
Answer 55cf0abdd3292fc2b20004e6
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.
Answer 55cf9f00e39efea7bc000382
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.
2 comments
Roy over 8 yearsAh, 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 8 yearsI agree, but it does answer the question, which was my main concern
Answer 55d2a2599113cba370000673
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!
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
1 comments
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.