La text-alignpropiedad en CSS se utiliza para alinear el contenido interno de un elemento de bloque.
p ( text-align: center; )Estos son los valores tradicionales para alinear texto:
left- El valor predeterminado. El contenido se alinea a lo largo del lado izquierdo.right- El contenido se alinea a lo largo del lado derecho.center- El contenido se centra entre los bordes izquierdo y derecho. Los espacios en blanco en los lados izquierdo y derecho de cada línea deben ser iguales.justify- El contenido se espacia de tal manera que quepan tantos bloques en una línea como sea posible y la primera palabra de esa línea esté a lo largo del borde izquierdo y la última palabra esté a lo largo del borde derecho.inherit- El valor será el que sea el elemento padre.
"Contenido" se utiliza aquí como término en lugar de "texto", porque si bien la alineación de texto ciertamente afecta al texto, afecta a todos los elementos en línea o de bloque en línea en ese contenedor.
También hay dos nuevos valores en CSS3, start y end. Estos valores facilitan la compatibilidad con varios idiomas. Por ejemplo, el inglés es un idioma de izquierda a derecha (ltr) y el árabe es un idioma de derecha a izquierda (rtl). El uso de "derecha" e "izquierda" para los valores es demasiado rígido y no se adapta a los cambios de dirección. Estos nuevos valores se adaptan:
start- Igual que "left" en ltr, igual que "right" en rtl.end- Igual que "right" en ltr, igual que "left" en rtl.
También existe match-parent, que es similar a inherit, solo que el nuevo valor se calcula contra la dirección del elemento actual en lugar de, ya sabes, no hacer eso.
Hay algunas cosas en la especificación que aún no son compatibles con el navegador. Uno es el valor "inicio fin" que alinearía la primera línea como si fuera "inicio" y cualquier línea posterior como si fuera "final". Otro es darle al valor una cadena, como text-align: "." start;El texto se alineará a lo largo de la primera aparición de eso, como en alinear una columna de números a lo largo de un punto decimal.
Ejemplos
Este texto está alineado a la izquierda.
Este texto está alineado a la derecha.
¡Estoy centrado!
Estoy justificado. Lleno el espacio exactamente (excepto en la última línea), incluso si tengo que estirarme un poco a veces.
Heredé la alineación de mi padre. En este caso, eso significa izquierda.
Soporte del navegador
Para izquierda, derecha, centro, justifique:
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | 3.5+ | 3+ | Alguna | Alguna |
Para los valores starty end:
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3.1+ | 3.6+ | Ninguno | Ninguno | Alguna | Alguna |