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

hace 1 año · Actualizado hace 10 meses

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

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
  1. Justificación de texto HML a la izquierda
  2. Texto HTML justificado al centro
  3. Texto HTML justificado a la derecha
  4. 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.

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir