1

For the sake of simplicity, I've put everything in the HTML part:

<section style="text-align:center;">
  <h3>FRUITS</h3>
  <ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ol>
</section>

How to make every number of ol to be aligned by the same "column"?

I would like to get this:

FRUITS
1. Apples
2. Bananas
3. Oranges
Stickers
  • 70,124
  • 20
  • 133
  • 171
gsamaras
  • 69,751
  • 39
  • 173
  • 279

1 Answers1

2

For left align the list numbers with the heading.

body {
    text-align: center;
}
section {
    display: inline-block;
    text-align: left;
}
ol {
    list-style: none;
    padding: 0;
}
ol li {
    counter-increment: step-counter;
}
ol li:before {
    content: counter(step-counter)". ";
}
<section>
    <h3>FRUITS</h3>
    <ol>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Oranges</li>
    </ol>
</section>
Stickers
  • 70,124
  • 20
  • 133
  • 171