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:
Éste es el código CSS usado:
Selec All Code:
1 2 3 4 5 6 7 8 9 10 | 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 quisieramos alinear el texto en la parte superior podríamos usar el siguiente código HTML:
Selec All Code:
1 | <img class="alineadoTextoImagenArriba" src="http://ruvic.es/wp-content/uploads/cuboAzul.jpg"/>Mi texto alineado arriba |
Comentarios (16)
vilmer
Gracias por el aporte.
Carlos
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
Excelente aporte, lo andaba buscando. Saludos, muchas gracias.
Edgar
Excelente aporte, gracias amigo.
Edgar
Excelente aporte, gracias amigo.
Edgar
Excelente aporte, gracias amigo.
dario
Muchas gracias amigo era lo que quería .Saludos
francisco
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
gracias por eso
Crear Página Web
Muchas Gracias por vuestro trabajo ;))
Un saludo !
jesus
esto me alludo gracias amigo
Alondra
gracias!! :D
Jorge
Muy buena ayuda }
Yo
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
y si en dado caso no tiene nombre de la clase en la img ya en el html que procede ¿? Disculpen
Javier
No me va el de "abajo", me lo deja arriba