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 crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo poner una imagen de fondo en html con css

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

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

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

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 insertar estilos css en html

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

Editar y personalizar el cursor con css

Imagen destacada del artículo Editar y personalizar el cursor con css

Centrar formulario html y css

Imagen destacada del artículo Centrar formulario html y css