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!