Centrar DIV en página

xuR1 · #1 (**permalink**) 08/01/2010, 14:23

Buenas, soy nuevo aqui y no se si es el sitio adequado para preguntar esto, pero se me haria un favor al que sepa ayudarme.
No es que sea un problema muy importante, es mas que nada para que quede mejor la pàgina.
Todo el contenido de la página se encuentra dentro de un Div, ahora yo quisiera poner ese div de tal manera que quede centrado,( por ejemplo http://www.msn.es ).
He buscado por otros sitios pero no he encontrado una solución eficaz.
Algunas cosas de las que he probado:

Código:

body {text-align:center;} #contenedor{margin:auto;}
(estos atributos entre otros)

pero no hay manera de centrarlo, puedo centrar el div si pongo

Código:

 position:relative;

o cualquier otro valor que no sea "absolution", pero entonces se me centra el div pero los demas div que hay dentro la pàgina se me desmarcan.

Espero que me podais ayudar, ya que en todos los sitios veo que la solucion es "margin:auto" pero no me funciona :S.

Dejo aqui los styles de body y #contenedor que tengo actualmente:

Código:

body {
        text-align:center;
        background-color:#00F;
        }

#contenedor {
        position:absolute;
        margin:auto;
        width:1000px;
        height:1017px;
        z-index:0;
        background-color:#CCC; }

Espero que puedan ayudarme, me hariais un gran favor ya que llebo un par de dias rompiendome la cabeza con esto y no lo consigo -.-"

Saludos! Gràcias de antemano.

Daniel Ulczyk · #2 (**permalink**) 08/01/2010, 14:31

A ver...
Probá esto:

Código HTML:

Ver original<html>
<head>
    <title></title>
    <style>
    #contenedor {
        margin:0 auto;
        width:85%;
        border:1px solid;
    }
    #contenedor p {
        padding: 5px 5px;
    }
    </style>
</head>
 
<body>
 
<div id="contenedor">
<p>Donec ante eros, tincidunt a rutrum ut, aliquet eu urna. Phasellus adipiscing augue magna, id pulvinar lorem. Suspendisse scelerisque tincidunt ornare. Maecenas ante elit, posuere vitae dignissim eu, ullamcorper ac libero. Aliquam nec libero at orci blandit congue. Sed eu eros tellus, id laoreet ante. Pellentesque metus nulla, ultricies at euismod non, commodo in diam. Cras dapibus convallis orci, eget vulputate nisl vestibulum in. Cras eros nisi, sagittis ut porta vitae, aliquam id metus. Quisque ut diam ipsum. Nullam ac nisl nisi. Aliquam erat volutpat.</p>
</div>
 
</body>
</html>

El secreto está en la declaración del width y en el margin.

loncho_rojas · #3 (**permalink**) 08/01/2010, 14:36

Tal vez sea descabellado, pero suele funcionar:

Cita:

<div align="center">

<div id="mi contenedor">bla, bla, bla... y todo el contenido</div>

</div>

creo que rompe alguna regla, pero es efectivo.. salvo que tengas unos FLOAT por ahi.

xuR1 · #4 (**permalink**) 08/01/2010, 15:47

He probado ambas cosas pero nada, sigue igual :S
Gracias igualmente,

Si alguien sabe alguna otra alternativa .. :S

Gracias de antemano.

RusO91 · #5 (**permalink**) 11/01/2010, 07:25

Cita:

Iniciado por xuR1

He probado ambas cosas pero nada, sigue igual :S
Gracias igualmente,

Si alguien sabe alguna otra alternativa .. :S

Gracias de antemano.

Hace unos días escribí en mi blog sobre cómo hacer para centrar una web horizontalmente usando CSS. Podés ver el post desde este enlace http://fb91.com.ar/blog/2010/01/05/c...te-usando-css/

Igualmente te digo que tenés que aplicarle al wrapper: margin:0 auto 0 auto;width:960px;text-align:left
y al body text-align:center (es para que te lo tome IE )

xuR1 · #6 (**permalink**) 11/01/2010, 11:06

Lo he echo pero nada, sigue igual, creo que lo que pasa es "position:absolute", porque si lo quito si me funciona, se me centra el div contenedor, pero todos los demas divs se alinean respecto la pàgina, no respecto el div contenedor que es donde quiero que se encuentren.

La pagina está estructurada así:

<div id="contenedor">
<div id="1">lalalalal</div>
<div id="2">lerelelere</div>
<div id="3">
<div id="31">nainonaino</div>
</div>
</div>

Esto es un ejemplo xD,
Es correcto no?

Grácias igualmente.
Saludos!