Cuando se trata de diseñar un sitio web, lo que cuenta son los detalles. Los colores, íconos y tipos de letra que elija afectan la legibilidad de su contenido, al igual que la forma en que se alinea el texto en la página.
En realidad, existen reglas coincidentes en el diseño para crear diseños organizados, lógicos y legibles. Estas reglas, conocidas como alineación de borde y centro, establecen que los elementos deben organizarse con respecto a una «línea invisible» o margen.
A continuación se muestra un ejemplo de una tarjeta de presentación compatible con texto alineado a la izquierda, a la derecha y al centro.
Para obtener un aspecto equilibrado similar para su sitio, necesita conocer tres formas de alinear su texto. Si bien la mayoría de las plataformas de desarrollo de sitios web brindan botones para simplificar este proceso, es posible que esté creando su sitio, aplicación o gráfico desde cero o en una herramienta sin estas opciones. En estos casos, necesita saber cómo alinear el texto con el código.
En esta publicación, hablaremos sobre cómo colocar texto a la izquierda, a la derecha y al centro en 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 una página es usar CSS alineación del texto propiedad. alineación del texto establece la alineación horizontal del contenido dentro de un elemento de bloque (es decir, un elemento que comienza una nueva línea y cubre todo el ancho de la página, por ejemplo
) o una celda de tabla. Mientras que el nombre alineación del texto significa que esta propiedad funciona en el texto, también afecta a todo el resto del contenido dentro del elemento de bloque, incluidas las imágenes y los botones.
Puedes usar alineación del texto propiedad en CSS integrado, CSS interno o CSS externo. CSS incorporado significa que el código HTML y CSS se colocarán juntos en la sección del cuerpo del documento HTML. Entonces, técnicamente, estarás alineando el texto «en HTML».
Sin embargo, se recomienda CSS interno y externo sobre el CSS incorporado. Esto se debe a que separar el código de estilo (CSS) del código de contenido (HTML) significa que puede realizar cambios fácilmente en su contenido en el futuro sin afectar el estilo de la página, y viceversa.
Alinear texto a HTML
La alineación del texto a lo largo del eje central es común en las páginas web. Sin embargo, aunque hace que la página parezca ordenada y simétrica, puede resultar aburrido centrar todo en la página. Además, tener párrafos grandes de texto centrados puede dificultar la lectura.
Por lo tanto, mantenga la alineación central para los títulos, las citas en bloque, los botones de llamada a la acción y otros elementos que interrumpen el flujo de su 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:
Supongamos que creo un sitio web y quiero centrar mi encabezado pero alinear a la izquierda todo lo demás. Puedo aprovechar la regla alineación del texto: centro en los titulares para lograr esto:
ver la pluma alineación del texto: centro 1 de Christina Perricone (@hubspot) en CódigoPen.
Ahora supongamos 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 de bloque, alineación del texto Una propiedad no se puede usar directamente en un botón para centrarlo. En cambio, podemos poner un botón en un div, un elemento de bloque genérico, y luego aplicarlo alineación del texto: centro a este contenedor div:
ver la pluma alineación del texto: centro 2 de Christina Perricone (@hubspot) en CódigoPen.
¿Necesita visualización? Este video explica todos estos pasos en detalle.
HTML Alinear texto a la izquierda
La alineación del texto al 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 algunos idiomas, incluidos árabe, hebreo, persa y urdu, tendrán una orientación predeterminada diferente).
La alineación a la izquierda es especialmente efectiva para colocar párrafos largos en una página, ya que crea un borde recto donde el lector comienza cada nueva línea de texto. Por el contrario, la alineación a la derecha y al centro crea un borde irregular que requiere que el lector comience cada nueva línea de texto de forma algo diferente. Esto ralentiza el proceso de lectura.
Intente leer los párrafos a continuación para ver qué alineación hace que el párrafo sea más fácil de leer. Si usted es como la mayoría de los lectores de inglés, prefiere la alineación a la izquierda.
HTML alinea el contenido a la izquierda de forma predeterminada, por lo que en muchos casos no es necesario utilizar un botón alineación del texto propiedades para lograr este efecto.
ver la pluma alineación del texto: izquierda 1 de Christina Perricone (@hubspot) en CódigoPen.
Sin embargo, puede encontrar situaciones en las que desee justificar a la izquierda una parte del contenido que se encuentra dentro de un conjunto de elementos con una alineación diferente, como a la derecha o al centro. Así que todavía es bueno saber cómo.
Para justificar a la izquierda en CSS, use una regla CSS alineación del texto: izquierda. En el siguiente ejemplo, el elemento div está configurado para centrar todo el contenido dentro de él. Sin embargo, cuando enviamos la solicitud alineación del texto: izquierda en el segundo párrafo, esto anula el estilo div:
ver la pluma alineación del texto: izquierda 2 de Christina Perricone (@hubspot) en CódigoPen.
HTML alinear texto a la derecha
Alinear el texto con el margen derecho es el tipo de alineación más raro, ya que va en contra de cómo la mayoría de la gente lee el texto. Aunque la lectura requiere más esfuerzo, el texto alineado a la derecha, cuando se usa estratégicamente, puede crear una apariencia poco convencional para la portada de una revista, currículum, poesía, carteles, tarjetas de presentación u otro contenido breve.
Este es un ejemplo del sorprendente efecto que puede tener el texto alineado a la derecha:
Supongamos que queremos justificar a la derecha todos los encabezados de una página. Podemos aplicar la regla CSS alineación del texto: derecha a todos los H2 para justificarlos adecuadamente:
ver la pluma alineación del texto: derecha de Christina Perricone (@hubspot) en CódigoPen.
Coincidencia de texto con HTML y CSS
Si tiene conocimientos básicos de diseño web, puede cambiar la alineación del texto. Esto puede ayudarlo a crear y personalizar diseños de página y hacer que su contenido sea más fácil de leer. Solo asegúrese de que su configuración sea para lectura después de todo.
Nota del editor: esta publicación se publicó originalmente en agosto de 2020 y se actualizó para que sea completa.
