El Tutorial HTML de Pocket

probablemente hayas notado que la mayoría de tus párrafos HTML no tienen una sangría inicial. Puede usar margino padding para empujar los párrafos a la derecha, pero eso afecta a todo el párrafo, no solo a la primera línea. Además, el texto siempre está alineado a la izquierda. ¿Cómo hacemos texto centrado, o texto alineado a la derecha?

Como vimos en la sección «bordes», el modelo de caja controla el área alrededor del texto. Esta sección muestra cómo mover el texto dentro del propio cuadro.,

sangría de texto

para sangría de texto, utilice la propiedad text-indent. El siguiente fragmento CSS agrega una sangría 2.0 em a todos los párrafos:

si ingresa un valor negativo para text-indent , la primera línea del texto se desplazará a la izquierda. Esto es útil para crear «sangrías colgantes» para encabezados y similares. El único truco es que debe establecer el relleno del bloque que contiene en consecuencia.

el «contenedor» div tiene un relleno uniforme de 5px alrededor, excepto por el relleno izquierdo, que es de 30px., El elemento h2 tiene su sangría de texto establecida en 25PX negativo. El resultado es que h2 desplaza 30px hacia la derecha debido al relleno, y luego desplaza 25px hacia la izquierda debido al negativo text-indent. Todos los demás elementos son 30px desde el borde izquierdo. El resultado es una sangría colgante de 25px.

alineación Horizontal

la propiedadtext-align le permite alinear el texto a la derecha, izquierda o centro dentro de su bloque que lo contiene., Las cuatro opciones son:

• left: alinea el texto a lo largo del borde izquierdo del cuadro, dejando un borde irregular a la derecha. Este es el valor predeterminado.

• center: centra el texto dentro de la caja.

• right: alinea el texto a lo largo del borde derecho del cuadro, dejando un borde irregular a la izquierda.

• justify: alinea el texto a lo largo de los bordes derecho e izquierdo de la caja. Esto puede hacer que el espacio entre palabras en la línea se vuelva desigual., La opción justify no está tan bien soportada en algunos navegadores antiguos.

echemos un vistazo a las cuatro opciones:

tenga en cuenta quetext-align alinea el texto y otro contenido en línea dentro de los cuadros. No afecta a los bloques en sí mismos. Por ejemplo, no puede usar text-align: center para centrar una caja más pequeña dentro de una caja más grande. Este tipo de cosas es parte de un concepto más avanzado llamado posicionamiento CSS.