Descripción de la forma de centrar imágenes usando estilos CSS
Lo que de verdad convierte el trabajo Web en un infierno son los navegadores y sus pequeñas sutilezas y diferencias a la hora de cumplir (o no) los estándares. Pero también es verdad que es excesivamente complicado y no debería ser así. Encima todavía hay mucho gañán por ahí que usa Internet Explorer 6 (o peor aún, Windows 98), Firefox del año de la polka, o (me dan escalofríos sólo de pensarlo) alguna versión de Netscape. Y así es cuando es imposible conseguir algo que funcione como es debido. A esos, lo siento mucho, pero que no haré esfuerzo alguno por darles soporte en mis páginas. Total, acabarán tarde o temprano con el ordenador frito por algún virus (muy merecidamente), y se comprarán uno nuevo con Windows 7 o Mac OS X. Como Dios manda ;-)
Si tienes que conseguir que un elemento de tu página se centre automáticamente en la misma lo que tienes que hacer es aplicarle un estilo como este:
.centrado{
margin-left: auto;
margin-right: auto;
}
Es decir, lo que tenemos que hacer es indicar que queremos un margen automático tanto a la izquierda como a la derecha del elemento. Obvio y sencillo ¿verdad? ;-)
Esto funcionará bien en Chrome, Firefox o Safari, pero si lo pruebas en Internet Explorer 8 no te hará ni caso por defecto. Más de alguno ya estará pensando: “¡Maldita sea!, estos #$%@ de Microsoft pasando de cumplir con los estándares”.
Bueno en realidad lo que pasa es otra cosa. Si no le indicamos otra cosa, por defecto IE8 mostrará el contenido HTML en modo "quirks", es decir, en modo de compatibilidad con páginas viejas, por lo que no hará caso a indicaciones estándar que le pongamos. Pero eso no siginifica que no soporte el estándar adecuadamente (al menos en este caso). Simplemente hay que indicarle que debe hacerlo.
Para ello lo que hay que hacer es poner como primera línea del código HTML el tipo de documento, indicando por tanto que debe ceñirse a un estándar concreto (sí, IE es un infierno). Por ejemplo, para XHTML 1.0 sería este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Haciendo esto, ahora IE8 intepreta correctamente las instrucciones y centra el elemento horizontalmente al aplicarle un estilo como el anterior.
Claro. Es que lo anterior se aplica a aquellos elementos, como los DIV, que se renderizan en modo bloque (ver W3C). Sin embargo las imágenes se renderizan en modo "inline" (Ver W3C) (en línea con el texto y otros elementos inline), por lo que no hace ni caso a los atributos anteriores de margen automático. Otros elementos inline son los enlaces, span, controles input, etc...
Pues tenemos dos opciones: usar el estilo CSS "text-align:center;" que hace que el texto (y los elementos en línea) se centren o, mejor aún, hacer que la imagen se comporte como un elemento de bloque añadiendo a sus estilos "display:block;":
.centrado{
display:block;
margin-left: auto;
margin-right: auto;
}
Al hacer esto ya se comportará de la manera esperada.
Buena pregunta. Me alegro de que la hagas... En CSS2 tampoco hay ninguna forma fácil de hacerlo. Y aún es más rebuscado que el caso anterior.
Básicamente lo que hay que hacer (y lo dice la propia W3C), es hacer que el elemento contenedor del elemento que queremos centrar se comporte como una celda de una tabla. Como las celdas de las tablas sí se pueden alinear con el estilo vertical-align, entonces si le damos una determinada altura seremos capaces de que se centren los elementos que contiene:
.centradoV
{
display: table-cell;
vertical-align: middle
}
El problema es que esto destruye el centrado horizontal del elemento padre, y si queremos centrar ambos tenemos que nidar otros elementos.
El contenido de esta página ha sido habilmente copiado de este documento:
| © 1997 - - La Güeb de Joaquín | |||||
|
Joaquin Medina Serrano
|
|||||
|