Imagen destacada del artículo CSS text-align propiedad para alinear el texto de una etiqueta html

CSS text-align propiedad para alinear el texto de una etiqueta html

css svg
actualizado: 04 / 02 / 2022

La propiedad text-align en css se usa para alinear horizontalmente el contenido de un elemento html, Esta propieda solo funciona si se aplica a elementos de bloque, si necesitas alinear el texto de una etiqueta inline como strong o span antes debes convertirlo a un elemento de bloque usando la propiedad display:block;

Propiedad text-align: center;

la regla css text-align : center; como su nombre lo indica te permite centrar el texto de forma horizontal dentro de la linea.

En el siguiente ejemplo usamos la propiedad text-align: center; para centrar un título en las etiquetas h1 y h2.

css
/* text-align:center; en etiquetas h para títulos*/
h1 {
text-align: center;
}
h2 {
text-align: center;
}
css
p {
text-align: center;
}
div {
text-align: center;
}

Centrar los encabezados es una tarea muy común así que esta propiedad de css te será muy útil en varias ocasiones.

Alinear el texto a la derecha con text-align: right;

con text-align : right; colocaremos el texto hacia la derecha de la pantalla. Mira el siguiente ejemplo de como usar la propiedad text-align: right;

css
h1 {
text-align: right;
}
h2 {
text-align: right;
}
p {
text-align: right;
}

Texto en la parte izquiera de la pantalla con text-align: left;

Este es el valor por defecto que trae la propiedad text-align, en todo caso si por alguna razón tienes que alinear tu texto a la izquierda con respecto a otro puedes hacerlo con el siguiente código.

css
h1 {
text-align: left;
}
h2 {
text-align: left;
}
p {
text-align: left;
}

text-align: justify;

En muchas ocasiones necesitarás justificar el texto de tu página web, por ejemplo si estás desarrollando para un periódico es común que justifiquen el texto ya que esto le da un caracter formal a la escritura. Para hacerlo en puedes usar la propiedad text-align: justify;

html
<p>
La propiedad text-align: justify, te permite justificar el texto de tus
páginas para dar un aspecto más formal a tu contenido.
</p>
css
p {
text-align: justify;
}
Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css

Cómo deshabilitar la selección de texto con css

Imagen destacada del artículo Cómo deshabilitar la selección de texto con css

Colores en html, códigos y nombres

Imagen destacada del artículo Colores en html, códigos y nombres