Centrar div (width dinamico)

#1 (**permalink**) 14/02/2011, 17:00

Muy buenas, tengo un div con un width:650px

y lo centro de la sigueinte forma

Código CSS:

Ver original#nav_principal {
    margin-left: 9%;
    margin-right: 9%;
}

ahora bien, después de pasar por un javascript este div pasa a tener un un width de longitud variable, ya sea 300px, 100px ,90px, 700px...

como puede hacer para mantenerlo centrado?

Un saludo y gracias!

sanxuan · #2 (**permalink**) 14/02/2011, 17:07

Usando margin-left:auto; margin-right:auto.
De manera más abreviada margin:0 auto, salvo que quieras otros valores para el margen superior e inferior.
Aunque cambies el ancho, seguirá centrado. Es necesario que le des un ancho, de otro modo ocupará el 100% del contenedor padre.

#3 (**permalink**) 14/02/2011, 17:11

me olvidaba de decir que así no se centra...
y tampoco entiendo muy bien por que...

sanxuan · #4 (**permalink**) 14/02/2011, 17:25

Sin ver el código HTML y CSS no puedo opinar.

#5 (**permalink**) 14/02/2011, 17:38

Código HTML:

Ver original<div id="nav_principal">
    <div id="navegacion">         
         <ul>
             <li><span class="imagen" >
                 <img  src="phpBB3/download/file.php?avatar=<?php echo $row_consulta_datos['user_avatar']; ?>" />
                 </span>
              </li>
        </ul>
    </div>
</div>

he resumido el numero de <li> para que sea más comprensible, supongo que eso sera insignificante

Código CSS:

Ver original#navegacion li {
float:left ; 
list-style:none ; 
margin: 0px 0px 0px 0px;
 
}
 
#nav_principal { 
margin-left:auto; 
margin-right:auto;
}
#navegacion { 
margin-left:auto; 
margin-right:auto;
}

el div nav_principal si que se centra ;) pero el navegación no.
Tambien porbe a ponerle margin: 0 auto; al <ul>

tengo este css eredado el cual no puedo tocar

Código CSS:

Ver originalul, menu, dir {
    -moz-padding-start: 40px;
    display: block;
    list-style-type: disc;
    margin: 1em 0;
}

ArturoGallegos · #6 (**permalink**) 14/02/2011, 18:46

para la navegación prueba

Código CSS:

Ver original#navegacion,#navegacion ul,#navegacion li{
    margin: 0 auto;
    padding:0;
}

así a simple vista yo diría que no se centra porque las listas tienen sangría por default, en algunos navegadores es con paddin en otros con margin... con el css que te indico debería andar

#7 (**permalink**) 15/02/2011, 11:55

nada... no va...
pero he detectado el problema!

el problema es que automáticamente el width de #navegacion toma el valor del 100% de #nav_principal
por lo que al poner margin: 0 auto a #navegacion se centra, pero sobran pixeles a la derecha
ahora la pregunta es ¿como hago para que el width de #navegacion no tome el valor del width de #nav_principal

ArturoGallegos · #8 (**permalink**) 15/02/2011, 12:07

muéstranos tu sitio o una demo de lo que tienes hasta ahora, para poder revisar mas a fondo y diagnosticar el problema

#9 (**permalink**) 15/02/2011, 16:18

http://www.airsoftgato.info/

La lista del final

sanxuan · #10 (**permalink**) 15/02/2011, 16:59

Yo lo he resuelto de la siguiente forma:
#navegacion{
text-align:center;
}
#navegacion li{
display:inline ;
list-style:none ;
margin: 0; /* este en realidad no te haría falta al haberlo declarado para todos los elementos */
}

#11 (**permalink**) 15/02/2011, 17:32

vale solucionado!

Muchas gracias a los dos
un saludo!