Alineamientos del texto
La manera más habitual en que se ve el texto en documentos escritos es alineado con el margen izquierdo (left). Pero también puede alinearse con el margen derecho (right) , por ejemplo para una lista o para resaltar o por estética. Otras veces interesa poner el texto centrado entre ambos márgenes, como en títulos de columnas. En los libros el texto suele estar alineado con ambos márgenes, se dice que está justificado. Veamos como se usan todas las propiedades relativas al posicionamiento del text: alineaciones, indentados...
| Propiedad | Uso | Valor |
|---|---|---|
| text-align | Como alinear el texto respecto a los márgenes | center, right, left, justify |
| text-indent | Un tabulador o indentado para las lineas | medida |
| text-transform | Muestra el en mayúsculas, minúsculas o solo la primera letra en mayúscula | uppercase, lowercase, capitalize |
| vertical-align | Como alinear verticalmente el texto respecto a otro elemento | baseline, sub, super, medida o porcentaje, text-top, text-bottom |
El alineamiento no es más que como situar el texto en relación a los márgenes del documento. Por defecto el texto se alinea a la izquierda. Un ejemplo muy simple:
text-align: center;
Aparte de alinear el texto podemos hacer que las lineas no comience en el margen, para esto usamos el indentado
text-indent: 50px;
Este primer párrafo va alineado a la izquierda
Si la rompes (<br>) se acaba el indentado
También puedes alinear el texto en vertical respecto a la linea en la que se encuentra. Al utilizar esta propiedad (vertical-align) CSS actúa sobre toda la linea y desplazando el texto o el resto de la linea para obtener el alineamiento adecuado. Es una propiedad con un funcionamiento algo enrevesado.
Esta propiedad no es exclusiva para textos, se aplica también a celdas de tabla y a otros elementos como imágenes o bloques con más valores posibles. Aquí me ciño a lo más básico y a lo que se aplica directamente al texto en linea.
- baseline: es el alineamiento por defecto, posición normal el texto se alinea con la base de la linea en que se encuentra.
- sub, super : texto queda por encima (bajando el resto de la linea) o desciende quedando por debajo de la linea en que se encuentra.
- medida positiva o negativa: texto queda desplazado hacia abajo (negativo) o hacia arriba (positivo). Numero o porcentaje (aplicado al texto)
Este es un ejemplo de un texto como <span style="vertical-align:super">superindice </span> y otro como <span style= "vertical-align:sub">subíndice</span>
Este es un ejemplo de un texto como superindice y otro como subíndice.
Para lograr las alineaciones del texto el navegador puede mover la linea entera donde se encuentra el texto a fin de dejar espacio para su alineación..