El texto es esencial en las páginas web, ya que le dice a sus usuarios de qué se trata su página web.
Cuando agregas texto a tu página web, dicta la dirección y la sensación de tu página web en función de tu idioma.
Por ejemplo, de forma predeterminada, el inglés se mueve de izquierda a derecha (LTR), mientras que el árabe se mueve de derecha a izquierda (RTL).
Pero la mayoría de las veces, no querrá que todo el texto permanezca en una sola posición de la pantalla o contenedor. Querrás que algunos estén en el centro, otros a la izquierda y otros a la derecha. Es posible que incluso desee que el texto llene su página o contenedor.
Esto es similar a lo que se hace cuando se editan textos en Microsoft Word o Google Docs, utilizando los botones de alineación a la izquierda, alineación a la derecha, centro y justificación.
También puede hacer lo mismo en sus páginas web usando código.
Cómo alinear el texto para centrarlo antes de HTML5
Antes de la introducción de HTML5, los desarrolladores realizaban estilos específicos con etiquetas HTML. Por ejemplo, podrías usar la etiqueta center para alinear tu texto con el centro, pero en HTML4, esta etiqueta se depreció. Aunque esto puede seguir funcionando con algunos de los principales navegadores, puede eliminarse en cualquier momento.
Así es como se ve:
<center> <h1> Bienvenido a ANATOMIA DE LAS CIBERPÁGINAS </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit....</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p> <h3>Aprendiendo HTML y CSS</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p> </center>
Esto generará todo nuestro texto en el centro de la página o en cualquier contenedor al que se aplique:
Pero ahora que tenemos HTML5, ya no usamos este método. Recuerda que es esencial manejar siempre todos los estilos con CSS. Debe usar HTML solo para agregar marcado a su página web.
Cómo alinear texto en HTML5
Con CSS, tienes muchas opciones que puedes usar para alinear tu texto. La principal propiedad CSS que funciona bien con la alineación de texto es la propiedad text-align . Esta propiedad se utiliza para especificar la alineación horizontal del texto de un elemento.
Sigamos con el ejemplo modelo antes expuesto. Puede usar la propiedad para mover el texto a la izquierda, a la derecha, al centro o incluso justificar su contenido, de modo que llene el elemento o la página web horizontalmente. text-align
// Syntax text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify;
Si desea alinear todo el texto de la página web, puede aplicar esta propiedad a cualquier etiqueta que contenga el texto, como la etiqueta div, el encabezado, el párrafo o la etiqueta body.
Antes de ver un ejemplo, exploremos las opciones/valores disponibles para esta propiedad.
- start: Esto se basa en la dirección. Cuando la dirección es de izquierda a derecha, significaría . Si la dirección es de derecha a izquierda, entonces significaría .startleftstartright
- end: Esto también se basa en la dirección. Cuando la dirección es de izquierda a derecha, entonces significaría derecha. Si la dirección es de derecha a izquierda, entonces significaría izquierda.endend
- left: Se utiliza para alinear los textos con el borde de la página o el contenedor.left
- right: Se utiliza para alinear los textos con el borde de la página o el contenedor.right
- center: Se utiliza para alinear los textos con el perfecto de la página o contenedor.center
- justify: se utiliza para ajustar el contenido del texto para que toque los bordes izquierdo y derecho de la página o el contenedor.
La sintaxis general sería:
selector {
text-align: value;
}
Cómo alinear el texto a la izquierda
Es posible que tengas que cambiar la alineación del texto hacia la izquierda si originalmente está en el lado derecho. Para ello, dirija el selector y utilice la propiedad junto como su valor. text-alignleft
// HTMLBienvenido a Anatomía de las ciberpáginas
// CSS p { text-align: left; }
Por ejemplo, si tienes tu contenido desde la derecha de tu pantalla usando la dirección RTL:
<html dir="rtl">
<body>
<h1> Bienvenidos</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit....</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
<h3>Aprendiendo HTML y CSS</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
</body>
</html>
Esto dará como resultado:
Puede aplicar estilo a la etiqueta body para alinear el texto de la página con el :left
body{
text-align: left;
}
Cómo alinear el texto a la derecha
De forma predeterminada, la página web o el contenido del contenedor y otros elementos comienzan desde la izquierda. Es posible que desee alinear este contenido a la derecha, al que se puede acceder mediante la propiedad con un valor .text-alignright
// HTMLBienvenidos a ...
// CSS p { text-align: right; }
Cómo alinear el texto al centro
En lugar de usar la etiqueta para mover nuestro contenido de texto al centro, ahora puede usar la propiedad junto con el valor para mover su texto al centro. text-aligncenter
// HTMLBienvenido a ...
// CSS p { text-align: center; }
Cómo justificar un texto
Si sabes cómo usar cualquier herramienta basada en texto como Microsoft Word o Google Docs, o herramientas como Photoshop, Figma y muchas más que manejan contenido, sabrás cómo funciona el ícono de justificar texto.
Lo usas para ayudar a que tu texto llegue hasta los bordes de una página/contenedor en lugar de tener algunos espacios irregulares innecesarios al final.
Esto no siempre es obvio, pero cuando echas un vistazo profundo a los bordes, notarás la diferencia, lo que tiene más sentido cuando tienes tanto texto y párrafos más largos.
Para ello, utilice la propiedad junto como valor: text-alignjustify
// HTML
<p>Lorem ipsum dolor sit amet consectetur adipcing elit. Architecto,
inventore. Culpa, rerum neque. Necessitatibus ined quod velit vitae
Expedita consequuntur ea quis reicindis nobis distinc quod des.</p>
// CSS
p {
text-align: justify;
}
