Как центрировать список тегов внутри неупорядоченного списка?

Question

Как можно перечислить теги, которые имеют отображение: блок и плавающие влево, центрироваться внутри неупорядоченного списка.

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

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

Answer 1

вместо отображения: блок, используйте это:

#navigation ul li {
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline;
    padding: 10px 8px;
    border: 1px solid green;
}