Ajustar DIV en el centro de otro DIV(width:auto)

rubencontrerasc7 · #1 (**permalink**) 26/01/2012, 11:49

Hola,
Estoy empezando con CSS y me ha surgido un problema con el posicionamiento y buscando en la red no he podido solucionar nada...
Quiero posicionar un DIV(nav) que como padre tiene otro DIV(top), y tengo que ponerlo justo en el centro y que cada vez que varíe la resolución que se ajuste al centro. Seguro que es una chorrada, pero bueno, espero que entendais que estoy empezando con esto.

Aqui dejo los codigos HTML y CSS:

Código HTML:

Ver original<body>
<div id="top">
<img src="images/bg-topmenu.png" align="left">
<div id="nav">&nbsp;
</div>
</div>

Código CSS:

Ver original* {text-align:center; margin: 0px; padding: 0;}
 
body{
background-image:url(../images/bg.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-ms-background-position-x:50%;
-ms-background-position-y:50%;}
#top{
width:auto;
height:164px;
background-image:url(../images/bg-top.bmp);
background-position:center;
background-repeat:no-repeat;
background-color:#680701;
border-bottom:5px solid #680701;
padding-left:150px;}
#nav{
background-color:#000000;
position: absolute;
top: 20px;
margin-right:30px auto;
height:30px;
width:900px;
padding:15px;
opacity:0.4;
filter:alpha(opacity=40);}

GAST0N · #2 (**permalink**) 26/01/2012, 12:00

no uses posicion absolute ni top en el nav

rubencontrerasc7 · #3 (**permalink**) 26/01/2012, 12:20

Cita:

Iniciado por GAST0N

no uses posicion absolute ni top en el nav

He hecho lo que me has dicho y sigue con el mismo comportamiento... no sé que podria arreglar para que funcione

C2am · #4 (**permalink**) 26/01/2012, 12:26

Hola
Tal como te han dicho no uses posicion absoluta, sino relative.
Y para centrar horizontalmente solo debes aplicarle a nav

Código CSS:

Ver original#nav{margin:0 auto}

El primer numero es para los margenes top y bottom y el "auto" es para los margenes izquierdo y derecho.
Saludos

PD: esto es incorrecto: margin-right:30px auto;

rubencontrerasc7 · #5 (**permalink**) 26/01/2012, 14:06

Cita:

Iniciado por C2am

Hola
Tal como te han dicho no uses posicion absoluta, sino relative.
Y para centrar horizontalmente solo debes aplicarle a nav

Código CSS:

Ver original#nav{margin:0 auto}

El primer numero es para los margenes top y bottom y el "auto" es para los margenes izquierdo y derecho.
Saludos

PD: esto es incorrecto: margin-right:30px auto;

Ya he conseguido arreglarlo. Gracias por ayudarme por segunda vez C2am!

C2am · #6 (**permalink**) 26/01/2012, 15:06

Me alegro que hayas solucionado el problema.
Saludos