Alinear texto al centro con CSS

30/Mar/2007 CSS , Deja un comentario
Ejemplos Programación CSS

En las primeras versiones del HTML existía el atributo align, el cual, mediante diferentes valores nos permitía alinear el texto a la izquierda, centro o derecha. Con la llegada de las hojas de estilo CSS este atributo se convierte en obsoleto y la alineación pasa a ser controlada por atributos CSS. En este ejemplo vamos a ver cómo podemos alinear texto al centro con CSS.

La propiedad CSS que nos permite alinear el texto es text-align. Dicha propiedad la podemos aplicar a los diferentes elementos HTML que gestionen bloques: cabeceras, párrafos, capas,…

La sintaxis de la propiedad text-align es la siguiente:

text-align : start | end | left | right | center | justify | match-parent | justify-all

Así, los valores que puede tomar text-align son:

  • justify, Justifica el contenido dentro de la caja de todas las líneas excepto de la última.
  • justify-all, Justifica el contenido dentro de la caja de todas las líneas incluida la última.
  • match-parent, Acepta la alineación que tenga el elemento padre.
  • end, Atiende a la dirección del texto. Si es un texto izquierda-derecha lo alinea a la derecha y si es un texto derecha-izquierda lo alinea a la izquierda.
  • center, Centra el texto dentro de la caja.
  • left, Alinea el texto a la izquierda de la caja.
  • start, Atiende a la dirección del texto. Si es un texto izquierda-derecha lo alinea a la izquierda y si es un texto derecha-izquierda lo alinea a la derecha.
  • right, Alinea el texto a la derecha de la caja.

En el caso de querer alinear texto al centro con CSS deberemos de utilizar el valor center. Así, por ejemplo, lo podemos aplicar a una cabecera. Lo primero que tendremos que hacer es definir una hoja de estilo en la cabecera de la página

h2.center{
  text-align: center;
}

Luego simplemente deberemos de utilizar la clase center dentro de un elemento h2. Para ello utilizamos el atributo class.

<h2 class="center">Cabecera centrada</h2>

Espero que os haya servido de ayuda este sencillo ejemplo para alinear texto al centro con CSS.

Vídeos sobre CSS


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*