Como alinear imágenes y texto con css
- Detalles
- Categoría: Programación
- Última actualización el Jueves, 17 Noviembre 2011 21:28
- Escrito por cybnet
- Visto: 6208
Cuándo se pone una imagen y un texto en un documento html, por defecto el texto se alinea verticalmente en línea base (baseline), esto es la línea base del texto y la imagen. Utilizando la propiedad css vertical-align podemos modificar este comportamiento y alinear el texto con la imagen según nos interese. Para conseguir que el texto "englobe" la imagen se utilizará la propiedad css float aplicada a la imagen.
Antes de seguir decir que los atributos align y valign en las imágenes están depreciados.
CSS vertical-align
La propiedad vertical-align sirve para decir dónde se alineará el texto verticalmente respecto a la imagen. Admite los siguientes valores:
| Valor | Descripción |
|---|---|
| length | Sube o baja el elemento el espacio indicado (por ejemplo en píxeles). Admite valores negativos. |
| % | Sube o bajo el elemento el porcentaje indicado respecto a la propiedad "line-height". Admite valores negativos. |
| baseline | Alinea el elemento con la línea base del elemento padre. Este es el valor por defecto. |
| sub | Alinea el elemento como si fuese un subíndice. |
| super | Alinea el elemento como si fuese un superíndice. |
| top | El punto alto de un elemento es alineado con el punto más de otro elemento en la línea |
| text-top | El punto alto de un elemento es alineado con el punto alto de la fuente del elemento padre. |
| middle | El elemento es puesto en la mitad del elemento padre. |
| bottom | El punto bajo del elemento es alineado con el elemento más bajo en la línea. |
| text-bottom | El punto bajo del elemento es alineado con el punto bajo de la fuente del elemento padre. |
| inherit | Especifica que el valor de la propiedad vertical-align es heredada desde el elemento padre. |
Visto esto, veamos algunos ejemplo de alineación vertical de texto e imágenes utilizando las propiedades css que acabamos de ver junto con "float".
Supongamos que tenemos el siguiente html:
<p><img src="/images/una_imgen.png" class="mimagen" />Este es el texto de prueba de la alineación vertical de texto e imágenes con css</p>
- Ejemplo 1: vertical-align: bottom
Aquí vemos una imagen con style="vertical-align: bottom;". Se conseguiría igualmente con el css aplicado a la clase que pusimos en la imagen, en este caso la clase es "mimagen". Nota como la imagen y el texto se alinean según los elemento más bajos de los dos que están en la misma línea.
.mimage {
vertical-align: bottom;
}
Este es el texto de prueba de la alineación vertical de texto e imágenes con css vertical-align: bottom
- Ejemplo 2: vertical-align: baseline
Aquí vemos una imagen con la propiedad vertical-align: baseline;. Se conseguiría lo mismo sin poner nada, pues baseline es el valor por defecto de vertical-align. Nota como, a diferencia de bottom, la imagen y el texto quedan alineados por la línea base.
.mimagen {
vertical-align: baseline;
}
Este es el texto de prueba de la alineación vertical de texto e imágenes con css vertical-align: baseline.
- Ejemplo 3: vertical-align: middle
.mimagen {
vertical-align: middle;
}
Este es el texto de prueba de la alineación vertical de texto e imágenes con css vertical-align: middle. Si el texto continua, la siguiente línea se va bajo la imagen.
- Ejemplo 4: vertical-align: top
.mimagen {
vertical-align: top;
}
Este es el texto de prueba de la alineación vertical de texto e imágenes con css vertical-align: top. Al continuar el texto, la siguiente línea se va bajo la imagen.
- Ejemplo 5: float: left
.mimagen {
float: left;
}
Este es el texto de prueba de la alineación vertical de texto e imágenes con css float: left. El texto queda siempre a la izquierda de la imagen "englobando" a la imagen hasta que la cantidad de texto ocupe tantas líneas que haga necesario irse bajo la imagen.
- Ejemplo 6: float: right
Este es el texto de prueba de la alineación vertical de texto e imágenes con css vertical-align: right. El texto queda siempre a la derecha de la imagen "englobando" a la imagen hasta que la cantidad de texto ocupe tantas líneas que haga necesario irse bajo la imagen.
RSS
el 99% de los expositores de temas web realmente dan instrucciones para lelos, no obligan al aprendiz a desarrollar su mente el problema al final es que lo llenan de una verborrea que lo marean mas de lo que enseñan, era diferente la enseñanza cuando aprendimos a programar en Basic, Cobol, RPG, Pascal porque entonces si te sacrificabas para desarrollar una simple instruccion, hay elementos tan indispensable en informatica que se obvian como campo, variable, alfanumerico, condicion etc
valing esta depreciado?
Perfil
Artículos
RSS
Google +1