¿Cómo alinear texto verticalmente junto a una imagen?

Mateo G. - July 19, 2024

Problema: Alinear texto verticalmente con imágenes

Colocar texto junto a una imagen puede causar desalineación, con el texto comenzando en la parte superior de la imagen. Esto puede hacer que el diseño se vea desequilibrado, especialmente cuando la altura de la imagen es diferente a la altura del texto.

Soluciones CSS para la Alineación Vertical de Texto

Uso de la Propiedad Vertical-Align

La propiedad vertical-align puede alinear texto verticalmente junto a una imagen. Aplica esta propiedad al elemento de imagen, no al texto. Establece vertical-align: middle en la imagen para lograr la alineación:

<div>
  <img style="vertical-align: middle" src="image.jpg" alt="Imagen">
  <span>Texto alineado con la imagen</span>
</div>

Este método funciona porque la imagen es un elemento en línea, y vertical-align afecta su posición en relación con otros elementos en línea. Aplicar vertical-align al elemento de texto a menudo no funciona como se espera, ya que solo afecta la posición del elemento en relación con su propia caja de línea.

Ejemplo: Usa Line-Height para Ajustes Finos

Al usar vertical-align, puedes ajustar la alineación con precisión modificando el line-height del contenedor padre. Esto puede ayudar a lograr una alineación perfecta en algunos casos:

.container {
  line-height: 1.5;
}

Método Flexbox para Alineación Vertical

Flexbox ofrece una solución confiable para la alineación vertical. Para usar este método:

Aplica display: flex al elemento padre para crear un contenedor flex.
Usa la propiedad align-items para centrar el contenido verticalmente.

Aquí tienes un ejemplo:

.container {
  display: flex;
  align-items: center;
}

<div class="container">
  <img src="image.jpg" alt="Imagen">
  <span>Texto alineado con la imagen</span>
</div>

Este enfoque permite centrar verticalmente múltiples elementos dentro del contenedor, independientemente de sus tamaños. También te da más control sobre el diseño y el espacio entre elementos.

Enfoques Alternativos para la Alineación Vertical de Texto

Técnica de Diseño con Grid

El diseño CSS Grid ofrece otra forma de alinear texto verticalmente con imágenes. Para usar este método:

Crea un contenedor grid:

.grid-container {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
}

Alinea los elementos en las celdas del grid:
```
.grid-container {
align-items: center;
}
```

Esta técnica permite un control preciso sobre el diseño y funciona bien para disposiciones complejas.

Ejemplo: Áreas de Plantilla Grid para Diseños Complejos

Usa grid-template-areas para crear diseños más complejos con áreas de grid nombradas:

.grid-container {
  display: grid;
  grid-template-areas: 
    "image heading"
    "image description";
  gap: 10px;
}
.image { grid-area: image; }
.heading { grid-area: heading; }
.description { grid-area: description; }

Esto permite una posición flexible de los elementos dentro del grid.

Método de Line-Height

El método de line-height es un enfoque simple que puede funcionar en algunos casos:

Establece el line-height del contenedor para que coincida con la altura de la imagen:

.container {
line-height: 60px; /* Cambia para que coincida con la altura de tu imagen */
}

Aplica vertical-align a la imagen:

.container img {
vertical-align: middle;
}

Ventajas de este método:

Fácil de implementar
Funciona bien para texto de una sola línea

Desventajas de este enfoque:

Menos flexible para texto de múltiples líneas
Necesita la altura exacta de la imagen
Puede requerir cambios para diferentes tamaños de pantalla

Aunque estos métodos pueden ser útiles en casos específicos, pueden no ser tan versátiles como los enfoques de flexbox o vertical-align para uso general.