Centrar un div con CSS
5 seguidores
Buenos días, llevo un par de días perdidos con esto y aunque pueda ser una tontería no lo encuentro en ninguna parte. ¿Cómo centro un div#contenedor en IE?
Con Firefox es facil: " margin:0px auto; "
Pero con IE solo encuentro dos métodos:
1)
body {text-align:center}
div#contenedor {text-align:left;}
2)
div#contenedor {
width:1200px;
position:absolute;
left:50%;
margin-left:-600px;
}
Pero nada, no funciona ninguno de los dos.
¿Alguien puede darme una respuesta?
Gracias.
abrandlincoln
aquí la respuesta!
http://css-tricks.com/snippets/css/
soleguia
Pues va a ser que no... :S
http://css-tricks.com/snippets/css/centering-a-website/
es el mismo método que he comentado para IE método 1.
No funciona.
Pero gracias.
abrandlincoln
Eros83 estás seguro que esto no te funciona?
HTML
<body>
<div id="contentedor">
<!-- contenidos aquí -->
</div>
</body>
CSS
body{text-align: center;}
#contenedor{
width: 800px;
margin: 0 auto;
text-align: left;
}
tu opción 1 carece de width y margin en el contenedor.
markshock
body {
text-align: center; /* Hack para que IE6 no de problemas */
background: #cc0033;
}
#container-web{
position: absolute; /*Posicionamiento absoluto*/
top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/
left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/
margin-left: -181px; /*Restamos la mitad de ancho de la capa para centrarla horizontalmente*/
margin-top: -160px; /*Restamos la mitad de ancho de la capa para centrarla horizontalmente*/
width: 361px;
height: 320px;
text-align:left;
background: #ffffff;
}
Ahí lo tienes, eso es lo que estoy usando actualmente en mi web y en todas las que hago claro... ;)
Si no quieres que te lo centre verticalmente usa este:
body {
text-align: center; /* Hack para que IE6 no de problemas */
background: #cc0033;
}
#container-web{
position: absolute; /*Posicionamiento absoluto*/
top: 50px; /*Desde arriba, los pixeles que queramos que tenga de separación. o 0 si queremos que este pagado arriba*/
left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/
margin-left: -181px; /*Restamos la mitad de ancho de la capa para centrarla horizontalmente*/
width: 361px;
height: 320px; /*En este caso el height es opcional, si quieres puedes ponerlo, o no*/
text-align:left;
background: #ffffff;
}
Diana Gutiérrez
¿Tienes bien declarado el doctype en el html? Suele dar problemas por eso
Sig...
Hola:
Exisiten varias formas de llegar a una solucion si es para IE6 lo mejor es utilizar un hack
aqui un metodo que tambien funciona:
.ElsCtr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página, en este caso el DIV */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
}
.Ctr #mainContent {
padding: 0 20px;
}
Saludos