…lo único que haremos será dividir en 2 en el margen en el orden que es top, right, bottom, left, pero aquí solo modificaremos el top y left.
. Infected-FX, Contenido centrado.
En realidad no es obligatorio el uso de margenes negativos. Este código también funcionaría:
#MyContent {
position: absolute;
height: 300px;
width: 200px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}Ejemplo 1. Claro que seguramente les resultará molesto que no funcione en Internet Explorer <= 6.
Y no, no me pregunten como funciona porque no tengo idea. Y sí, al igual que en el otro ejemplo es obligatorio definir ancho y alto.
Actualización 2006-07-08T: NicoFierro comenta una posible explicación. Por mi lado, encontré que el chiste estaría sólo en CSS2 (no CSS21) en la sección Computing widths and margins - Absolutely positioned, replaced elements. Personalmente me resulta demasiado complejo seguirle el razonamiento, pero tengo la sospecha de que lo importante es el punto 5, If at this point both
.margin-left and margin-right are still auto, solve the equation under the extra constraint that the two margins must get equal values
5 comentarios.
NicoFierro
Funciona porque el margen se aplica a partir de los valores absolutos de posición. Si lo cambiaras, por ejemplo, a left: 50%, verías que se centra en la mitad derecha, o sea, a tres cuartos.
Saludos, muy bueno todo.
7 de julio de 2006
marcoss
Me parece que hay algo mal ahí, ese código no está bien, me animaría a decir que es un error de Opera y Firefox el centrar el elemento.
Supuestamente el
margin:autocalcula la distancia entre los bordes de la caja y el elemento exterior mas próximo.En este caso con un
top:0yleft:0la distancia es nula, por ende se debe posicionar en la esquina superior izquierda, ya que el cáculo sería 0/2…Además no funciona en IE, ya con eso quedaría descartado.
7 de julio de 2006
NicoFierro
Yo creo que está bien.
Con position:absolute es diferente, justamente porque puede ubicarse en cualquier lugar sin importarle nada (se puede solapar sobre otros elementos). Al darle todas las posiciones en cero, significa que se estira el contenedor (el mismísimo elemento html, que cuenta como si tuviera position:relative) hasta los bordes del viewport mismo. Sin position:absolute no se centraría verticalmente porque el body (contenedor en ese caso) no se estiraría mucho por ser inncesario, pero sí horizontalmente, como es usual.
Esto se puede pobrar siempre y cuando recordemos que si al elemento html no se le define el color de fondo, toma el de body.
Es eso o estoy volando de fiebre, jaja.
7 de julio de 2006
NicoFierro
Perdón, me equivoqué. El html no se estira, sino que ya mide el tamaño del viewport porque no puede ser más chico (algo tiene que ocupar la pantalla), creo.
7 de julio de 2006
Federico
Just for the record: Alguna vez escuche la explicación de por qué funciona, y era tan descabellada como cualquier cosa de CSS.
NicoFierro: No sé si eso explica por qué no funciona si usas
autoparalefty el resto.marcoss: Funciona también en Safari y Konqueror. La democracia es la tirania de la mayoría.
8 de julio de 2006