10 Oct

Alinear el texto con imágenes en CSS: arriba, en el medio o abajo

Si queremos alinear texto al lado de una imagen con HTML y CSS muchas veces nos encontramos con el problema de que no queda alineado del modo que nos interesa, ya que por defecto se alinea abajo. La solución pasa por usar la regla de CSS «vertical-align«, que nos va a permitir que el texto se empiece a escribir en la parte de arriba de la imagen, desde el centro o en la parte inferior.

Por ejemplo:

Cubo AzulAlineamos arriba

Cubo AzulAlineamos en el centro

Cubo AzulAlineamos abajo

 

Éste es el código CSS usado:

img.alineadoTextoImagenArriba{
  vertical-align: text-top;  
}
img.alineadoTextoImagenCentro{
  vertical-align: middle;
  /* Ojo vertical-align: text-middle no existe*/
}
img.alineadoTextoImagenAbajo{
  vertical-align: text-bottom;  
}

 

Si por ejemplo quisiéramos alinear el texto en la parte superior podríamos usar el siguiente código HTML:

<img class="alineadoTextoImagenArriba" src="https://ruvic.es/wp-content/uploads/cuboAzul.jpg"/>Mi texto alineado arriba

 

Comparte

Comentarios (23)

vilmer
26 diciembre, 2014 Responder

Gracias por el aporte.

Carlos
19 enero, 2015 Responder

Buenas, y si querríamos tener dos renglones y alinear ambos renglones por ejemplo arriba del todo? Es decir un "Título" y un "Subtítulo"? Ando buscando eso y no encuentro solución... Gracias de antemano.

Juan
21 enero, 2015 Responder

Excelente aporte, lo andaba buscando. Saludos, muchas gracias.

Edgar
23 junio, 2015 Responder

Excelente aporte, gracias amigo.

Edgar
23 junio, 2015 Responder

Excelente aporte, gracias amigo.

Edgar
23 junio, 2015 Responder

Excelente aporte, gracias amigo.

dario
24 junio, 2015 Responder

Muchas gracias amigo era lo que quería .Saludos

francisco
8 julio, 2015 Responder

Excelente me sirvio de mucho. Pero tambien estaba buscando poner el titulo debajo de la imagen o encima si me ayudan por favor

    creador de la pagina
    19 enero, 2016 Responder

    gracias por eso

Crear Página Web
18 enero, 2016 Responder

Muchas Gracias por vuestro trabajo ;))

Un saludo !

jesus
19 enero, 2016 Responder

esto me alludo gracias amigo

Alondra
1 marzo, 2016 Responder

gracias!! :D

Jorge
26 mayo, 2017 Responder

Muy buena ayuda }

Yo
15 diciembre, 2017 Responder

Hola, a mí el texto se me pone abajo de la imagen cuando lo que quiero es ponerlo en el medio, y aun poniéndolo como tu ejemplo no me sale, tiene que ver con que la imagen y el texto lo quiero meter en un div?

yensi
21 diciembre, 2017 Responder

y si en dado caso no tiene nombre de la clase en la img ya en el html que procede ¿? Disculpen

Javier
28 febrero, 2018 Responder

No me va el de "abajo", me lo deja arriba

Gonzalo
21 octubre, 2018 Responder

Y de esta forma como puedo cambiar el tamaño del texto?
He probado con font-size y no me funciona, tambien he probado a insertarlo en una etiqueta h3 o p y cambia de comportamiento.

Miguel
22 noviembre, 2018 Responder

Muchas gracias por el aporte, llevo 2 horas buscando la solución.... y en 2 segundos solucionado. :)

Laura Villota
1 abril, 2019 Responder

Hola, gracias por la información, pero desearía saber cómo puedo justificar el texto a lado de la imagen, ¿si se puede hacer esto? Gracias

NoobMaster69
19 agosto, 2020 Responder

Gracias, funcionó perfectamente.

Sary
26 junio, 2021 Responder

Muchas gracias :)

justificar texto en wordpress 2021
2 febrero, 2022 Responder

Eres un fiera... Muchas gracias Saludos

https://mundocms.com/como-agregar-botones-de-texto-subrayados-y-justificados-en-wordpress/

Mayte
28 enero, 2023 Responder

¡¡¡ BENDITO SEAS, RUBÉN !!!

Responder