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;
}