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.
