How to center list tags inside an unordered list?
- by Jack
How can list tags that are given a display:block and are floated left, be centered inside an unordered list.
The HTML:
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
<li>News</li>
<li>Events</li>
<li>Video</li>
<li>Photos</li>
</ul>
</div><!-- navigation -->
The CSS:
#navigation {
border: 3px solid orange;
overflow: hidden;
}
#navigation ul {
list-style-type: none;
text-align: center;
}
#navigation ul li {
float: left;
display: block;
padding: 10px 8px;
border: 1px solid green;
}
