Estilos>>Técnicas
Está claro que la utilización más inmediata del centrado es la de fragmentos de texto, creando reglas para que se aplique esta alineación a todos los elementos de un tipo, a una clase determinada o creando un estilo en línea para aplicarla a un único elemento en un momento puntual.
Ejemplos:
<h5 style="text-align: center;">Este
fragmento
de titulo h5 está centrado porque lo hemos especificado
en un estilo incrustado</h5>
A este fragmento se le aplicó clase "centro" definida como estilo en línea en la cabecera del documento
<style
type="text/css"> .centro {
text-align: center;} </style>
...
<p
class="centro">A este fragmento se le
aplicó clase "centro" definida como estilo en
línea en la cabecera del documento</p>
En ocasiones lo que necesitamos centrar no es el texto, sino el bloque que lo contiene. La forma de hacerlo es establecer los márgenes izquierdo y derecho como "auto", de forma que el visor calcule el espacio sobrante y lo divida a partes iguales entre ambas zonas. Lógicamente, como lo habitual será que el bloque tenga suficiente contenido como para ocupar la totalidad de la anchura disponible, habrá que aplicar esta técnica a bloques con una anchura fija.
.poema { padding: 0.5em 1em 1em;
width: 25em;
margin-left: auto;
margin-right: auto;
background-color: rgb(236, 225,
187);
}
Aunque habrás visto el bloque del soneto centrado, tanto con Internet Explorer como con Mozlla, Firefox u Ópera, ha sido porque todas las páginas de este manual llevan aplicado un parche genérico que corrige la mayoría de los errores de interpretación de CSS2 que tiene Internet Explorer.
Si no queremos aplicar el parche completo
tendríamos que aplicar la solución provisional
que consiste en encerrar el bloque que deseamos centrar dentro de otro
contenedor genérico al que le aplicamos una regla de estilo
para que alinee el texto centrado: con ello se consigue que el bloque
se sitúe en el centro. Puedes ver el mismo ejemplo adaptado
y revisar el código para comprobar lo que estamos comentando.
Aprovechando la idea del centrado de bloques podemos aplicarla también para centrar imágenes, aunque en este caso hay que tener en cuenta una matización: las imágenes son elementos "en línea" y como tales no generan un salto anterior y posterior. Ya hemos visto en otros momentos que podemos considerarlas como una "letra" más dentro de la cadena de caracteres que componen un texto. Eso quiere decir que, para poder hacer que se centren tenemos que convertirlas en elementos de tipo "bloque".
En este caso no necesitamos hacer ninguna maniobra especial
para que se sitúen correctamente en Internet Explorer.
La siguiente imagen salta y se centra
automáticamente aunque está incluida en la
página inmediatamete después del punto con el que
finaliza esta frase.
El código que hemos utilizado se ha limitado a
crear una clase con las
condiciones que habíamos reseñado previamente y
aplicarla luego a la etiqueta img.
.imagenbloque
{
display: block;
margin-left: auto;
margin-right: auto;
}No disponemos en CSS2 de una propiedad para centrar verticalmente pero, a pesar de ello, podemos combinar algunas propiedades existentes para lograrlo.
La idea en la que nos vamos a basar es que el contenido de las celdas de las tablas sí que admite el centrado vertical. Aprovechando esta particularidad crearemos un contenedor externo que se muestre como si fuera una tabla de celda y le aplicaremos el centrado vertical.
este es el texto que se debería centrar en vertical
El ejemplo que se muestra en la zona izquierda, a pesar de ser una aplicación de una sugerencia propuesta desde el W3C, sólo se reproduce correctamente cuando la página se visualiza con navegadores basados en el motor Gecko (Mozilla, Firefox, Galeón, Safari, etc) pero no se respetan las propiedades si se visualiza con Internet Explorer u Opera.
.centrarvertical { border: 1px solid rgb(153, 102, 51);
min-height: 100px;
width: 400px;
display: table-cell;
vertical-align: middle;
float: left;
margin-right: 1em;
color: rgb(255, 255, 204);
background-color: rgb(192, 192,
192);
font-size: x-large;
font-weight: bold;
}