Foros del Web » Creando para Internet » CSS »

Centrar Div sin saber el ancho "width"

Estas en el tema de Centrar Div sin saber el ancho "width" en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/01/2011, 17:10
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 13 años, 3 meses
Puntos: 1
Centrar Div sin saber el ancho "width"

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
__________________
Saludos :adios: :adios: :adios:
  #2 (permalink)  
Antiguo 31/01/2011, 17:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Centrar Div sin saber el ancho "width"

prueba con esto
  #3 (permalink)  
Antiguo 31/01/2011, 17:35
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.824
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Centrar Div sin saber el ancho "width"

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;
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 31/01/2011, 17:43
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Centrar Div sin saber el ancho "width"

Cita:
Iniciado por IsaBelM Ver Mensaje
Gracias IsaBelM, pero no me sirvio.

Cita:
Iniciado por Ag666 Ver Mensaje
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!
__________________
Saludos :adios: :adios: :adios:
  #5 (permalink)  
Antiguo 31/01/2011, 17:58
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.824
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Centrar Div sin saber el ancho "width"

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 31/01/2011, 18:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar Div sin saber el ancho "width"

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:
Ver original
  1. #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,
  #7 (permalink)  
Antiguo 31/01/2011, 21:22
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Centrar Div sin saber el ancho "width"

Cita:
Iniciado por kseso? Ver Mensaje
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:
Ver original
  1. #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
__________________
Saludos :adios: :adios: :adios:
  #8 (permalink)  
Antiguo 01/02/2011, 16:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar Div sin saber el ancho "width"

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.

Etiquetas: ancho
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:26.