How to center Roman numerals over list items

Question

I am trying to create a list where a Roman numeral appears directly above the text, i.e. as follows:

I. Text Text Text 

This is the code I tried, but I think alignment aligns the whole list, not just Roman numbers.

 <ol type="I"> <li>To be respected for our occupational and educational choices</li> <br> <li>To meet occupational standards set by employers and to be proficient in workplace basics</li> <br> <li>To receive a world class education</li> <br> <li>To earn credentials and degrees which qualify us for further education and work</li> <br> <li>To receive guidance that fits our interests and aptitudes</li> <br> <li>To work in the occupations for which we have trained</li> <br> <li>To study in safe and stimulating schools</li> <br> <li>To serve our communities</li> <br> <li>To learn from competent instructors committed to the success of their students</li> <br> <li>To meet face0to-face with business,industry, and organized Labor</li> </ol> 

Answer 1

You can use CSS2 counters .

jsFiddle Demo

 ol { counter-reset: my-counter; list-style-type: none; } ol li { text-align: center; } ol li:before { content: counter(my-counter, upper-roman) "."; counter-increment: my-counter; display: block; } 

For further reading: Numbering in style

---

Another alternative is to create a line break at the beginning of each list item. This has some browser support issues (it only works on FF, but maybe with some extra work, you can fix it).

jsFiddle Demo

 ol li:before { content :"\A"; white-space: pre; } 

Answer 2

This will work, I think ( fiddle )

CSS

 li { text-align: center; } 

HTML:

 <ol type="I"> <li><br>To be respected for our occupational and educational choices</li> <br> <li><br>To meet occupational standards set by employers and to be proficient in workplace basics</li> <br> <li><br>To receive a world class education</li> <br> <li><br>To earn credentials and degrees which qualify us for further education and work</li> <br> <li><br>To receive guidance that fits our interests and aptitudes</li> <br> <li><br>To work in the occupations for which we have trained</li> <br> <li><br>To study in safe and stimulating schools</li> <br> <li><br>To serve our communities</li> <br> <li><br>To learn from competent instructors committed to the success of their students</li> <br> <li><br>To meet face0to-face with business,industry, and organized Labor</li> </ol> 

If you want this to be specific to this list, create a class for li in CSS. In addition, I left my original breaks for the interval, but I would have deleted them and used a pad or mark in CSS.