CSS: Centralizando um menu (lista) na horizontal e vertical

Olá visitante!

Aprenda neste post como centralizar um menu css (ul li) na horizontal e vertical.

Nível: facílimo

Sem maiores comentários, o código já diz tudo… rsss

Copia, cola e seja feliz!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{ 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;
        }
    </style>
</head>
<body>
<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>
</body>
</html>

Veja um exemplo neste link.

Abraço e até daqui a pouco!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *