Alineación vertical con align-items

La lista de enlaces ya se ve como en el diseño. Ahora nos ocuparemos del logotipo. Es otro enlace que contiene una imagen:

<a class="logo" href="#">
  <img src="img/hiking-club.svg" alt="Logotipo de Hiking Club">
</a>

Necesitamos centrar el logotipo en vertical.

El enlace del logotipo y la lista son elementos grid dentro del contenedor navigation. De forma predeterminada, empiezan en el borde superior del elemento padre y ocupan toda la altura disponible.

Inicio

Rutas

Equipo

Podemos cambiar este comportamiento con la propiedad align-items. Se aplica al contenedor grid y controla la alineación vertical de sus elementos.

.grid-container {
  display: grid;
  align-items: start;
}

align-items admite los siguientes valores:

• stretch — valor predeterminado; los elementos empiezan en el borde superior y ocupan toda la altura;
• start — los elementos se alinean con el borde superior y, si tienen poco contenido, no ocupan toda la altura;
• end — los elementos se alinean con el borde inferior;
• center — los elementos se colocan en el centro;

Practicaremos con align-items y después centraremos el logotipo en vertical.

Luego pondremos a prueba la navegación. Probar el resultado es una parte esencial del trabajo con HTML y CSS. Es especialmente importante en los componentes, porque su contenido y sus dimensiones pueden cambiar. Para probar la navegación, añadiremos algunos elementos a la lista.