
Una propiedad text-align en CSS que describe cómo los elementos en línea, como el texto, se alinean en contenedores de bloques. Tenga en cuenta que la propiedad text-align
no controla la alineación de los elementos del bloque, sino la alineación del contenido en línea dentro de ellos.
Funciones text-align css
Valor inicial | start , o un valor indefinido representará el valor left si es la orientación del objeto ltr y right si es la orientación del texto rtl si el valor start no es compatible con el navegador. |
---|---|
Aplicado a | bloques de contenedores. |
Heredable | Sí |
Móvil | No |
Valor calculado | También se especifica, a excepción de la palabra reservada match-parent , que buscará en la dirección del elemento padre y se convertirá al valor left o right . |
/* Palabras reservadas */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* valores globales */ text-align: inherit; text-align: initial; text-align: unset;
Ejemplos y aplicaciones en código
Un ejemplo del uso de todas las palabras reservadas admitidas en una propiedad text-align
, y repetiremos cada ejemplo dos veces, una en un párrafo en inglés (dirección de texto de izquierda a derecha) y una vez en un párrafo con texto de derecha a izquierda dirección:
< p class = "start" dir = "ltr" > Probando < code > text-align: start </ code > </ p > < p class = "start" dir = "rtl" > < code > text-align : inicio </ code > </ p > < hr > < p class = "end" dir = "ltr" > Prueba de < code > alineación de texto: final </ code > </ p > < p class = "end" dir = "rtl" > < code > alineación de texto : fin </ code > </ p > < hr > < p class = "left" dir = "ltr" > Probando < code > text-align: left </ code > </ p > < p class = "left" dir = "rtl" > < code > text-align : izquierda </ code > </ p > < hr > < p class = "right" dir = "ltr" > Prueba de < code > alineación de texto: derecha </ code > </ p > < p class = "derecha" dir = "rtl" > < code > alineación de texto : derecha </ code > </ p > < hr > < p class = "center" dir = "rtl" > < code > text-align: center </ code > </ p > < p class = "center" dir = "ltr" > Prueba < code > text-align : centro </ code > </ p > < hr > < p class = "justify" dir = "ltr" > Prueba de < code > text-align: justify </ code > . El texto debe estar espaciado para alinear sus bordes izquierdo y derecho con los bordes izquierdo y derecho del cuadro de línea, excepto por la última línea. </ p > < p class = "justify" dir = "rtl" > < code > alinear texto: justificar </ code >. El navegador intentará llenar toda la línea de texto desde el borde izquierdo hasta el borde derecho del cuadro de línea, excepto la última línea. </ p > < hr > < div dir = "rtl" > < p class = "match-parent" dir = "ltr" > Prueba de < code > text-align: match-parent </ code > </ p > </ div > < div dir = "ltr" > < p class = "match-parent" dir = "rtl" > < code > text-align: match-parent </ code > </ p > </div >
Código CSS:
p { background-color: #f8f9fa; border: 1px solid #eaecf0; padding: 1em; margin: 1em; } .end { text-align: end; } .left { text-align: left; } .right { text-align: right; } .start { text-align: start; } .center { text-align: center; } .justify { text-align: justify; } .match-parent { text-align: match-parent; }
Observe en el último ejemplo cómo la dirección del elemento padre es opuesta a la dirección del elemento al que se aplica la regla text-align: match-parent
. Vale la pena señalar que es match-parent
posible que la función no funcione en todos los navegadores (incluso en los modernos), y se -webkit-
debe usar un precedente como con ella.
Soporte de navegadores
Característica | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Soporte básico (izquierda, derecha, centro, justificar) | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
Comienzo | 1.0 | 1.0 | No soportado | soportado | 3.1 |
Fin | 1.0 | 3.6 | No soportado | soportado | 3.1 |
Padre-pareja | 16 | 40 | No soportado | No soportado | No soportado |
Características generales
La propiedad acepta text-align
una de las siguientes palabras reservadas.
start
La palabra reservada se comporta left
si la orientación del objeto es de izquierda a derecha y se comporta right
si la orientación del objeto es de derecha a izquierda.
end
La palabra reservada se comporta right
si la orientación del objeto es de izquierda a derecha y se comporta left
si la orientación del objeto es de derecha a izquierda.
left
Los elementos de línea se alinearán con el borde izquierdo del cuadro de línea.
right
Los elementos de línea se alinearán con el borde derecho del cuadro de línea.
center
Las líneas de pedido se alinearán en el medio del cuadro de línea.
justify
El navegador intentará llenar toda la línea de texto desde el borde izquierdo hasta el borde derecho del cuadro de línea, excepto la última línea.
justify-all
Igual que justificar, pero la última línea llenará el cuadro en línea.
match-parent
Sin embargo inherit, es similar a la palabra reservada start
y end
se calculará según la dirección del elemento principal y luego se reemplazará por left
o right
.
Estructura text-align css
text-align: start | end | left | right | center | justify | match-parent;
Consulte también
- La página de propiedades
text-align-last
que describe cómo se alinea la última línea de texto. - Página de propiedades
right
que ayuda a determinar la posición horizontal correcta de un elemento que se puede reposicionar. - La página de propiedades
left
que define la posición horizontal izquierda de un elemento que se puede reposicionar.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS