Centralizar menu

by Tiago Agostinho

HTML

<div id="all">
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Fotos</a></li>
        <li><a href="#">Localização</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</div>

CSS

*{ margin: 0;padding: 0; }
body{ font-family: "trebuchet ms"; }
a{ text-decoration: none; color: #000; }
a:hover{ }

#all{
    width: 580px;
    height: 80px;
    line-height: 80px; /* centraliza na vertical */
    background-color: #f1f1f1;
    border: 1px dashed #ccc;
    margin: 0 auto;
}
ul.menu{
    text-align: center; /* centraliza na horizontal */
}
ul.menu li{
    display: inline-block; /* centraliza na horizontal */
    margin: 0 5px;
}
ul.menu li a{
    background-color: #3d7bb3;
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
}
ul.menu li a:hover{
    background-color: #8BBADC;
}