¿Cómo justificar un texto en HTML con CSS?

hace 2 años · Actualizado hace 1 año

La justificación de un texto se refiere a cómo se alinean las líneas de texto en un bloque de texto. Puedes justificar un texto con CSS de varias maneras. A continuación, te explicaré cómo hacerlo utilizando el atributo text-align.

Índice

Justificación de texto HML a la izquierda
Texto HTML justificado al centro
Texto HTML justificado a la derecha
Justificación completa a todo el ancho

Justificación de texto HML a la izquierda

Para justificar un texto a la izquierda, simplemente establece el atributo text-align en left. Por ejemplo:

<p style="text-align: left;">Este es un texto justificado a la izquierda.</p>

Texto HTML justificado al centro

Para justificar un texto al centro, establece el atributo text-align en center. Por ejemplo:

<p style="text-align: center;">Este es un texto justificado al centro.</p>

Texto HTML justificado a la derecha

Para justificar un texto a la derecha, establece el atributo text-align en right. Por ejemplo:

<p style="text-align: right;">Este es un texto justificado a la derecha.</p>

Justificación completa a todo el ancho

Para justificar completamente un texto, establece el atributo text-align en justify. Por ejemplo:

<p style="text-align: justify;">Este es un texto justificado completamente.</p>

Al justificar un texto completamente, CSS ajustará el espacio entre las palabras para que las líneas de texto se alineen tanto en la izquierda como en la derecha. Ten en cuenta que esto puede hacer que el texto parezca más denso.

También puedes utilizar las hojas de estilo CSS externas o internas para aplicar estilos a todo tu sitio web en lugar de tener que aplicar estilos a cada elemento individualmente. Por ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <p>Este es un texto justificado completamente.</p>
  </body>
</html>

Espero que este tutorial te haya sido útil para entender cómo justificar un texto en HTML con CSS.