<div> Tag Examples
Examples of the div
tag in HTML 5
Using a <div> tag to center a list
(see the <div> tag demo above)
<div style="width: 35%; margin: 0.5em auto; border: 6px outset #0000ff"> <style scoped="scoped"> ul.star-shaped-bullet { margin: 0; list-style: none; text-align: center } ul.star-shaped-bullet li:before { content: "\2606\a0" } </style> <ul class="star-shaped-bullet" style="padding: 6px; text-align: left"> <li>Tina Fey</li> <li>Jane Lynch</li> <li>Kyra Sedgwick</li> <li>Andie MacDowell</li> <li>Laura San Giacomo</li> <li>Clare MacIntyre-Ross</li> <li>Kimberly Williams-Paisley</li> </ul> </div>
On the <div> tag, the text-align: center
style is used to center the list, along with auto
in the second position of the margin
style, which keeps the left margin from being forced to a fixed width. The text-align: left
style for the li element keeps the list items left justified. If the div element was omitted and the text-align: center
style was coded on the <ul> tag then each list item would be centered and the bullets would be staggered.
Demo of various border styles.