Saltar al contenido

Cómo alinear texto a la izquierda, a la derecha y al centro en HTML

febrero 3, 2022
Site owner aligning text in HTML with CSS.jpgkeepProtocol

En el diseño web, los detalles importan. Los colores, los íconos y el tipo de letra que elija afectan la legibilidad de su contenido, al igual que la forma en que alinea el texto en la página.

De hecho, existen principios de alineación en el diseño para crear diseños organizados, lógicos y legibles. Conocidos como alineación de borde y centro, estos principios establecen que los elementos deben organizarse en relación con «una línea invisible» o margen.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

A continuación se muestra un ejemplo de una tarjeta de presentación que sigue estos principios e incluye texto alineado a la izquierda, alineado a la derecha y alineado al centro.

La tarjeta de visita sigue la alineación del centro y el borde

Fuente de imagen

Para lograr una apariencia equilibrada similar en su sitio, necesita saber cómo alinear su texto de estas tres maneras. Si bien la mayoría de las plataformas de creación de sitios web proporcionarán botones para simplificar este proceso, es posible que esté creando un sitio, una aplicación o un gráfico desde cero o en una herramienta sin estas opciones. En estos casos, deberá saber cómo alinear el texto mediante código.

En esta publicación, veremos cómo alinear a la izquierda, a la derecha y al centro el texto con HTML y CSS.

Cómo alinear texto en HTML

Dado que la alineación es un tipo de estilo de página, la mejor manera de alinear el contenido HTML en la página es con el CSS texto alineado propiedad. texto alineado establece la alineación horizontal del contenido dentro de un elemento de bloque (es decir, un elemento que comienza una nueva línea y ocupa todo el ancho de la página, como

) o una celda de tabla. Mientras que el nombre texto alineado implica que esta propiedad funciona en el texto, también afecta a todos los demás contenidos dentro del elemento de bloque, incluidas las imágenes y los botones.

Puedes usar el texto alineado propiedad en CSS en línea, CSS interno o CSS externo. CSS en línea significa que su HTML y CSS se colocarán juntos en la sección del cuerpo de su documento HTML. Entonces, técnicamente, estarás alineando el texto «en HTML».

Sin embargo, se recomienda CSS interno y externo sobre CSS en línea. Esto se debe a que separar su código de estilo (CSS) de su código de contenido (HTML) significa que puede realizar fácilmente cambios de contenido en el futuro sin afectar el estilo de la página y viceversa.

HTML Alinear texto al centro

La alineación del texto a lo largo del eje central es común en los sitios web. Sin embargo, aunque hace que la página se vea organizada y simétrica, centrar todo en la página puede resultar aburrido. Además, centrar párrafos grandes de texto puede dificultar la lectura.

Por lo tanto, la alineación central debe reservarse para títulos, citas en bloque, botones de llamada a la acción y otros elementos que interrumpen el flujo del documento para captar la atención del lector.

Este es un ejemplo del uso de la alineación central en los elementos más importantes de su página de inicio:

una página web con un centro CTA alineado

Fuente de imagen

Digamos que estoy creando una página web y quiero centrar mi encabezado, pero mantener todo lo demás alineado a la izquierda. Puedo usar la regla alineación de texto: centro en los encabezados para lograr esto:

ver la pluma alineación de texto: centro 1 de Christina Perricone (@hubspot) sobre CódigoPen.

Ahora, digamos que quiero centrar un elemento de botón en la página. Dado que el botón HTML es un elemento en línea, no un elemento a nivel de bloque, el texto alineado La propiedad no se puede usar directamente en el botón para centrarlo. En su lugar, podemos colocar el botón dentro de un div, el elemento genérico a nivel de bloque, luego aplicar alineación de texto: centro a este contenedor div:

ver la pluma alineación de texto: centro 2 de Christina Perricone (@hubspot) sobre CódigoPen.

HTML Alinear texto a la izquierda

La alineación del texto contra el margen izquierdo es el tipo de alineación más común porque imita la forma en que la mayoría de la gente lee, de izquierda a derecha. (Tenga en cuenta que las páginas web configuradas en ciertos idiomas, incluidos árabe, hebreo, persa y urdu, tendrán una orientación predeterminada diferente).

La alineación a la izquierda es particularmente efectiva para ubicar párrafos largos en una página porque crea un borde recto donde el lector comienza cada nueva línea de texto. La alineación a la derecha y al centro, por el contrario, crea un borde irregular que requiere que el lector comience cada nueva línea de texto en un punto ligeramente diferente. Esto ralentiza el proceso de lectura.

Intente leer los siguientes párrafos para ver qué alineación hace que el párrafo sea más fácil de leer. Si eres como la mayoría de los lectores de inglés, preferirás la alineación a la izquierda.

HTML alinea el contenido a la izquierda de forma predeterminada, por lo que en muchos casos no necesitará usar el texto alineado propiedad para lograr este efecto.

ver la pluma alineación de texto: izquierda 1 de Christina Perricone (@hubspot) sobre CódigoPen.

Sin embargo, puede encontrar situaciones en las que desee alinear a la izquierda una parte del contenido que se encuentra dentro de un conjunto de elementos en una alineación diferente, como a la derecha o al centro. Por lo tanto, todavía es bueno saber cómo.

Para justificar a la izquierda en CSS, use la regla CSS alineación de texto: izquierda. En el ejemplo a continuación, el elemento div está configurado para centrar todo el contenido dentro de él. Sin embargo, cuando aplicamos alineación de texto: izquierda al segundo párrafo, esto anula el estilo del div:

ver la pluma alineación de texto: izquierda 2 de Christina Perricone (@hubspot) sobre CódigoPen.

HTML Alinear texto a la derecha

La alineación del texto contra el margen del lado derecho es el tipo de alineación menos común, ya que entra en conflicto con la forma en que la mayoría de la gente lee el texto. Aunque requiere más esfuerzo para leer, el texto justificado a la derecha, cuando se usa estratégicamente, puede crear una apariencia poco convencional para la portada de su revista, currículum, poesía, carteles, tarjetas de presentación u otro contenido de formato breve.

Este es un ejemplo del sorprendente efecto que puede tener el texto alineado a la derecha:

Texto colorido alineado a la derecha en la página web

Fuente de imagen

Digamos que queremos alinear a la derecha todos los títulos de la página. Podemos aplicar la regla CSS alineación de texto: derecha a todos los H2 para justificarlos a la derecha:

ver la pluma alineación de texto: derecha de Christina Perricone (@hubspot) sobre CódigoPen.

Alineación de su texto con HTML y CSS

Si tiene algunos conocimientos básicos de diseño web, puede cambiar la alineación de su texto. Esto puede ayudarlo a crear y personalizar sus diseños de página y hacer que su contenido sea más legible. Solo asegúrese de que, al final, sus alineaciones sirvan para la experiencia de lectura.

Nota del editor: esta publicación se publicó originalmente en agosto de 2020 y se actualizó para que sea más completa.

Nueva llamada a la acción