10 Oct 2013

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:

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
Comparte

© 2010 Ruvic Soluciones Informáticas

Subir