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

 

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> que la contiene, en este caso el <div> con la id nav.

menú CSS responsive y centrado

Deja un comentario

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