ProgramingWeb

Propiedad text-align en css y html

La propiedad text-align nos permite alinear y colocar el texto en distintas posiciones dentro de un elemento a continuación veremos sus valores posibles además también aprenderás a controlar la posicion del texto en forma vertical (text-align: vertical).

Centrar el texto con text-align : center;

la regla css text-align : center; como su nombre lo indica te permite centrar el texto de forma horizontal. (más adelante aprenderas a centrarlo verticalmente). Mira el siguiente ejemplo de como usar la propiedad text-align: center;

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

p {
  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;

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.

h1 {
  text-align: left;
}

h2 {
  text-align: left;
}

p {
  text-align: left;
}

¿Cómo justificar el contenido en html y css? Usando text-align: justify;

En muchas ocasiones necesitara 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;

<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>
p {
  text-align: justify;
}

text-align vertical centrado vertical de texto con css

Esta propiedad no existe en css, lo más parecido es vertical-align pero lo que hace esta es alinear una porción de un texto pero con respecto a ese texto, si lo que quieres es centrar verticalmente un elemento, por ejemplo un logo dentro de un header, puedes usar flexbox.

En este ejemplo tenemos un header y un logo dentro de una etiqueta h1. El header tendrá una altura de 200px por lo que necesitamos centrar de forma vertical el logo.

<header>
  <h1>Logo</h1>
</header>
header {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

La propiedad align-items: center; lo centra en forma vertical y justify-content: center; de forma horizontal.