Original article: How to Align Text in HTML – Text-align, Center, and Justified Example
El texto es esencial en las páginas web, ya que les dice a tus usuarios de qué trata tu página.
Cuando agregas texto a tu página web, este dictará la dirección y la sensación de tu página web en función de tu idioma.
Por ejemplo, por defecto, 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ás que todo tu texto permanezca en una sola posición de tu pantalla o contenedor. Necesitarás algunos textos en el centro, algunos a la izquierda y otros a la derecha. Incluso podrías querer que el texto llene el ancho de tu página o contenedor.
Esto es similar a lo que haces cuando editas textos en Microsoft Word o Google Docs, utilizando los botones de alineación izquierda, derecha, centro y justificado.
También puedes hacer lo mismo en tus páginas web usando código.
Cómo se alineaba el texto al centro antes de HTML5
Antes de la introducción de HTML5, los desarrolladores realizaban estilos específicos con etiquetas HTML. Por ejemplo, podías usar la etiqueta center para alinear tu texto al centro, pero en HTML4, esta etiqueta quedó obsoleta. Aunque esto aún puede funcionar con algunos navegadores actuales, podría dejar de hacerlo en cualquier momento.
Así es cómo se ve:
<center>
<h1> Welcome to freeCodeCamp </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
<h3>How we work</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
</center>
Esto mostrará todo nuestro texto centrado en la página o el contenedor al que se aplica:
Pero ahora que tenemos HTML5, ya no usamos este método. Recuerda que es esencial manejar todos los estilos mediante CSS. Solo debes usar HTML para agregar el marcado de tu página web.
Cómo alinear texto en HTML5
Con CSS, tienes muchas opciones que puedes usar para alinear tu texto. La propiedad CSS principal que funciona bien con la alineación de texto es la propiedad text-align. Puedes usar esta propiedad para especificar la alineación horizontal del texto en un elemento.
Supongamos que tienes algo de texto en tu página web, por ejemplo:
<h1> Welcome to freeCodeCamp </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
<h3>How we work</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
Puedes usar la propiedad text-align para mover el texto a la izquierda, derecha, centro o incluso justificar tu contenido, de forma que llene el elemento o la página web horizontalmente.
// Syntax
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
Si deseas alinear todo el texto de tu página web, puedes aplicar esta propiedad a cualquier etiqueta que contenga el texto, como las etiquetas div, heading, paragraph o body.
Antes de ver un ejemplo, exploremos las opciones/valores disponibles para esta propiedad.
start: Esta se basa en la dirección. Cuando la dirección es de izquierda a derecha,startsignificaría izquierda. Si la dirección es de derecha a izquierda, entoncesstartsignificaría derecha.end: Esta también se basa en la dirección. Cuando la dirección es de izquierda a derecha, entoncesendsignificaría derecha. Si la dirección es de derecha a izquierda, entoncesendsignificaría izquierda.left: Usarás esta para alinear los textos al borde izquierdo de la página o contenedor.right: Usarás esta para alinear los textos al borde derecho de la página o contenedor.center: Usarás esta para alinear los textos al centro exacto de la página o contenedor.justify: Usarás esta para ajustar el contenido del texto a los bordes izquierdo y derecho de tu página o contenedor.
La sintaxis general sería:
selector {
text-align: valor;
}
Cómo alinear texto a la izquierda
Podrías necesitar cambiar la alineación de tu texto a la izquierda si originalmente estaba en el lado derecho. Harás esto apuntando al selector y usando la propiedad text-align junto a left como su valor.
// HTML
<p> Bienvenido a freeCodeCamp </p>
// 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> Welcome to freeCodeCamp </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
<h3>How we work</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
</body>
</html>
Esto mostrará:
Puedes dar estilo a la etiqueta body para alinear el texto de la página a la izquierda con left:
body {
text-align: left;
}
Cómo alinear texto a la derecha
Por defecto, tu página web o el contenido en el contenedor y otros elementos comienzan desde la izquierda. Podrías querer alinear este contenido a la derecha, lo cual es posible usando la propiedad text-align con un valor right.
// HTML
<p> Bienvenido a freeCodeCamp </p>
// CSS
p {
text-align: right;
}
Cómo alinear texto al centro
En lugar de usar la etiqueta center para mover nuestro contenido de texto al centro, ahora puedes usar la propiedad text-align junto al valor center .
// HTML
<p> Bienvenido a freeCodeCamp </p>
// CSS
p {
text-align: center;
}
Cómo justificar 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 icono de texto justificado.
Lo usarás para ayudar a que tu texto llegue hasta los bordes de una página/contenedor en lugar de tener algunos espacios desiguales innecesarios al final.
Esto no siempre es obvio, pero cuando miras profundamente los bordes, notarás la diferencia, lo cual tiene más sentido cuando tienes mucho texto y párrafos más largos.
Lo haces usando la propiedad text-align junto con justify como su valor:
// HTML
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
// CSS
p {
text-align: center;
}
Resumen
En este artículo, has aprendido a alinear el texto de tu página web HTML usando la propiedad text-align de CSS.
¡Embárcate en un viaje de aprendizaje! Explora 200+ artículos de expertos sobre desarrollo web. Visita mi blog para obtener más contenido cautivador de mi parte.