Artículos
CSS

Alinear texto al centro con CSS

30/Mar/2007

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.

Código Fuente

Descárgate el código fuente de Alinear texto al centro con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios