Centrar Div sin saber el ancho "width"

[granbosteron]

Se puede centrar un div sin saber el width?
Sabemos que con margin:0 auto 0 auto; lo usamos cuando tenemos un medida seteada en el width.

Pero lo que necesito es que el div este centrado sin tener seteado el width, ya que debe crecer de acuerdo al contenido que se le vaya agregando.

No encontre ejemplo que sea compatible con firefox e ie7 o inferior. Encontre soluciones pero en todos los casos son trucos, como en ie poner "text-align: center" en el body. Pero bueno, busco algo mas generico que creo que no existe.

Supongo que los browsers como el ie8 ya actualizaron estos temas, pero bien sabemos que no todo el mundo anda actualizando su browser y menos a los usuarios a quienes queremos llegar.

Por este ultimo motivo, no es mas facil seguir usando las tablas? me venia gustando el css hasta que me encontre con estas limitaciones, obviamente al principio cuesta, pero veo que hay cosas que todavia no esta definidas del todo bien.

Espero me orienten con algun ejemplo generico para los 2 browser si es posible.

gracias

[IsaBelM]

prueba con esto

[ArturoGallegos]

no se puede centrar un div si no especificas un ancho... el porque ñ.ñ muy simple, los divs cuando no se les especifica el ancho estos tomas en 100% del ancho de su padre

si lo colocas inmediatamente después del body tendrá el 100% del navegador, si lo colocas dentro de otro div tendrá el 100% del div padre

Nota: en lugar de usar margin:0 auto 0 auto; como has indicado para centrar un div solo coloca margin:0 auto;

[granbosteron]

Iniciado por IsaBelM

prueba con esto

Gracias IsaBelM, pero no me sirvio.

Iniciado por Ag666

no se puede centrar un div si no especificas un ancho... el porque ñ.ñ muy simple, los divs cuando no se les especifica el ancho estos tomas en 100% del ancho de su padre

si lo colocas inmediatamente después del body tendrá el 100% del navegador, si lo colocas dentro de otro div tendrá el 100% del div padre

Nota: en lugar de usar margin:0 auto 0 auto; como has indicado para centrar un div solo coloca margin:0 auto;

Gracias Ag666, y si pense que seria asi. Que no tiene solucion!

[ArturoGallegos]

en efecto el centrar un div sin ancho definido en porcentajes o medidas fijas no se puede, pero quizás si nos muestras un screenshot de lo que deseas lograr podamos encontrar alguna solución o alternativa

[kseso?]

Por definición un divisor (div) es un elemento de bloque que si no se limita su tamaño ocupará todo el espacio (en horizontal) que tenga disponible. Así que ya queda centrado, pero ocupando la totalidad.
Sin más información sobre qué necesita, no se puede ofrecer una solución ad doc.

Pero respecto a su pregunta si es posible centrar un div sin conocer a priori su anchura sí es posible.
Sólo tiene que limitarla, como le decía en un principio. Y se me ocurre que:
.- Puede usar un max-width (y sus equivalentes para ie) y aplicarle el margin: 0 auto.
:- Otra forma de limitar su anchura sin referirse a ella es que aplique un margen lateral:

Código CSS:

#contenedor {margin: 0 10%;/*10 por ciento*/}
 

por ejemplo.

Pero en ambos casos está afectando a su tamaño, ya sea de forma directa o indirecta.
Por cierto, hay veces que en vez de centrar el contenedor se puede optar por centrar sus contenidos,

[granbosteron]

Iniciado por kseso?

Por definición un divisor (div) es un elemento de bloque que si no se limita su tamaño ocupará todo el espacio (en horizontal) que tenga disponible. Así que ya queda centrado, pero ocupando la totalidad.
Sin más información sobre qué necesita, no se puede ofrecer una solución ad doc.

Pero respecto a su pregunta si es posible centrar un div sin conocer a priori su anchura sí es posible.
Sólo tiene que limitarla, como le decía en un principio. Y se me ocurre que:
.- Puede usar un max-width (y sus equivalentes para ie) y aplicarle el margin: 0 auto.
:- Otra forma de limitar su anchura sin referirse a ella es que aplique un margen lateral:

Código CSS:

#contenedor {margin: 0 10%;/*10 por ciento*/}
 

por ejemplo.

Pero en ambos casos está afectando a su tamaño, ya sea de forma directa o indirecta.
Por cierto, hay veces que en vez de centrar el contenedor se puede optar por centrar sus contenidos,

Gracias Kseso.
Necesito que funcione esto:

Código HTML:

<style type="text/css">
html,body {
	margin:0;
	padding:0;
	height:100%;
}


.mother {
	position:relative; /* needed for footer positioning*/
	margin:0 auto 0 auto; /* center, not in IE5 */
	width:100%;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}


.mother-header {
	background:#990;
	width:1000px;
	margin:0 auto;
	height:180px;
}


.mother-content {
	background: #09C;
	width:1000px;
	margin:0 auto;
	padding:0 0 400px 0; /* bottom padding for footer */
}


.mother-footer {
	position:absolute;
	background: #999; 
	width:100%;
	bottom:0; /* stick to bottom */
	height:400px;
}




.nav-princ { margin:0 auto;}
.nav-princ .r{ background: #ff0000; width:22px; height:57px; float:left;}
.nav-princ .l{ background: #ff0000; width:22px; height:57px; float:left;}
.nav-princ .links{ background: #ffffff;  height:57px; float:left;}
</style>
</head>
<body>
<div class="mother">
    <div class="mother-header">header</div>
    <div class="mother-content">

                <div class="nav-princ">
                    <div class="l"></div>
                    <div class="links">
                        <a href="#">Automóviles</a>
                        <a href="#">Automóviles</a>
                        <a href="#">Automóviles</a>
                     </div>
                     <div class="r"></div>
                 </div>
                 
      </div>
      <div class="mother-footer">footer</div>
</div>
</body>
</html> 

Necesito que "nav-princ" haga crecer la caja que lo contiene deacuerdo a la cantidad de links que tenga en su interior, o sea sin darle medida de ancho a los divs que lo contienen.

Simplifique mi codigo para que entiendan lo que necesito. Quizas alguno dira, para que lo necesito, pero bueno necesito que funcione de esa manera y si es posible de forma standard para ie y firefox. En firefox funciona con display:table; pero no es compatible con ie7 o inferior.

gracias de nuevo

[kseso?]

No se si será algo como lo siguiente lo que busca:
Menú dentrado con independencia del número de opciones.
Quizás haya que depurar alguna propiedad o ajustar algún valor.
Como observará, ha habido una simplificación del código: un div para contener una lista con sus correspondientes li/a.