Menú horizontal CSS responsive centrado automáticamente

Este es un menú que he creado para practicar las listas en CSS, con el grupo al que estoy impartiendo formación en Saregune en una acción formativa de Lanbide. Este código tiene cosas muy interesantes como que el menú (una <ul>), este siempre centrado automáticamente en cualquier resolución, excepto cuando ya no entre en pantalla, que habría que modificar su posicionamiento a través de CSS media queries, las cuales explicaré más tarde en esta formación.

Este el código y la imagen del cangrejo

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <title>El Centollo</title>

    <style>

      *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      header{
        background-color: #F9F8FC;
      }

      #logo{
        margin: auto;
        height: 250px;
        width: 320px;
        text-align: center;
      }

      #logo h1{
         font-family: 'Pacifico', cursive;
         font-size: 58px;
       }

     nav{
       height: 60px;
       background-color:#17181C;
       text-align: center;
     }

     nav ul{
        list-style: none;
        display: inline-block;
        padding:18px;
     }

     nav ul li{
         float: left;
         margin-top: 20px;
     }

     nav ul li a {
         color: white;
         font-weight: bold;
         text-decoration: none;
         font-size: 20px;
         padding: 18px;
     }

     nav ul li a:hover{
       background-color: #929fb3;
     }

   </style>

 </head>

 <body>

  <header>
     <div id="logo">
        <img src="crab.png" alt="El centollo">
        <h1>El Centollo</h1>
     </div>
     <nav>
       <ul>
         <li><a href="#">Menu</a></li>
         <li><a href="#">Contacto</a></li>
         <li><a href="#">Ubicación</a></li>
         <li><a href="#">Reservas</a></li>
       </ul>
     </nav>
   </header>
 </body>
</html>

 

Tricks del código

  • El <div> del logo tiene un margin:auto para el centrado automático y una anchura asignada. Para centrar lo que hay en su interior, la imagen del cangrejo y el <h1>, utilizo la propiedad text-align:center.
  • Los elementos de la lista <li>, tienen la propiedad float:left, para que se posiciones horizontalmente.
  • La lista <ul>, tiene la propiedad list-style:none para quitar el punto que llevan delante los <li> y la propiedad display:inline-block que hace que la <ul> sea tratada como texto. Esto será la clave para centrar la lista automáticamente , usando la propiedad text-align:center en el <div> o elemento que la contiene, en este caso el elemento nav.

menú CSS responsive y centrado

9 comentarios sobre “Menú horizontal CSS responsive centrado automáticamente

    • raul Autor del artículoContestar

      Me alegro mucho. Puedes seguirme también en Twitter @raulperez0481 para más consejos y tips sobre programación, WordPress, …

  1. Erick Contestar

    Muchas Gracias estaba buscandolo por todos lados.. una pregunta.. que efectos se podran poner en el boton ? cirular?.. neon , imagen

    • raul Autor del artículoContestar

      Me alegro mucho. Puedes seguirme también en Twitter @raulperez0481 para más consejos y tips sobre programación, WordPress, …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *