Uso de alineación de texto
Definición y sintaxis
El atributo text-align se utiliza para describir cómo se alinea un elemento en línea dentro de un elemento a nivel de bloque que es el elemento padre
Por definición, se puede ver que el atributo text-align no controla la alineación de los elementos a nivel de bloque. Solo tiene efecto en elementos en línea dentro de elementos a nivel de bloque.
Echemos un vistazo a los valores. del atributo text-align
izquierda
derecha
centro
justificar
inicio (nuevo en CSS3) (valor predeterminado)
end (nuevo en CSS3)
match-parent (nuevo en CSS3)
Echemos un vistazo a la sintaxis
# El contenido está alineado a la izquierda text-align: left ;# El contenido está alineado a la derecha text-align: right # El contenido está alineado al centro text-align: center # El contenido está alineado en ambos extremos, pero para; la línea interrumpida forzada (la línea interrumpida) y la última línea (incluida solo una línea Text-align: justify; # CSS3 alineación del contenido inicio límite text-align: inicio; # CSS3 alineación del contenido final límite text-align: end; # CSS3 this El valor se comporta igual que heredar, excepto que la palabra clave inicial o final heredada por el valor se calcula con respecto al valor de dirección del padre. El valor calculado puede ser alineado con el texto izquierdo y derecho: match-parent
justificar
En primer lugar, está claro que este método de alineación tiene un. efecto de rendimiento más fuerte en el texto en inglés, porque el inglés es un vocabulario con palabras largas y cortas, como los caracteres chinos, es difícil ver el efecto de configurar el contenido para que esté alineado en ambos extremos. p> Echemos un vistazo al efecto de alinear ambos extremos
HTML
Este párrafo contiene una palabra muy larga: thisisveryveryveryveryveryverylongword Este párrafo contiene una palabra muy larga
<. p> CSS.mydiv{width: 120px ;border: 3pxsolid red; text-align: justify;}
De hecho, solo necesitas declarar text-align-last: justificar; para establecer que la última línea se alinee en ambos extremos
inicio y final (nuevo en CSS3)
Vayamos directamente al ejemplo
HTML
CSS
.test.start{border: 2pxsolid red;text-align: start;}.test.end{border: 2pxsolid red;text-align: end;}
Bueno, no vi ninguna diferencia entre izquierda y derecha. Lo descubriré más tarde. Déjame agregar más
Efecto en elementos en línea
Alineación de texto. es efectivo en texto dentro de elementos a nivel de bloque, pero ¿tiene algún efecto en los propios elementos en línea?
HTML
CSS
> .mydiv{ancho: 400px; alto: 30px; borde: 2pxsolid rojo; }span{padding-left: 15px; padding-right: 15px; ;}.right{text-align: right;}.center{text-align: center;}.justify{text-align-last: justify;}
Bueno, el efecto y la alineación del texto son lo mismo... Maldita sea, es lo mismo, Justify obviamente no tiene ningún efecto, ¿de acuerdo?
Si lo analizas detenidamente, ¿podría ser que no hay espacios entre espacios, como las palabras en inglés, y la representación del navegador será incorrecta. Si cree que estos tres intervalos están integrados, pruébelo y agregue dos espacios entre intervalos
HTML
Es cierto
<. p> A continuación, agregue espacios. Sí, ¿es posible establecer un margen? Desafortunadamente, no puedo probarlo yo mismo.Efecto de implementación en inline-block
En el mismo ejemplo, Los elementos en línea se reemplazan con elementos a nivel de bloque. Para elementos a nivel de bloque, configure display: inline-block;
HTML
CSS
.mydiv{width. : 400px; altura: 30px; borde: 2pxsolid rojo;}p{display: inline-block; padding: 5px; vertical-align: top; 1pxsolid; }.right{text-align: right;}.center{text- align: center;}.justify{text-align-last: justify;}
Mira, el efecto es el mismo y Parece que se ha descubierto algo nuevo. Los elementos a nivel de bloque después del bloque en línea no necesitan agregar espacios. Se puede lograr el efecto de justificación.
De hecho, se debe a que los elementos a nivel de bloque. después del bloque en línea tiene espacios para obtener más detalles, consulte mi otro artículo "Métodos para eliminar espacios después del bloque en línea"
Enlace: /p/50ef0d1988de
Fuente: