Foros del web, para los que viven de bits

Andrecitop · 01-jun-2008, 13:54

Hola miren tengo 2 divs dentro de un contenedor, los dos div estan uno al lado de otro, hasta ahi todo perfecto, ahora lo q necesito esq estos dos esten centrados con respecto al contenedor?????... estoy q me mato buscando forma alguna y naaa... Agradezco sus respuestas

cierto el contenedor debe tener un width:auto;

Mikmoro · 01-jun-2008, 17:31

Podrías probar poniendo a los dos divs display:inline; y a su contenedor text-align: center; aunque que funcione o no dependerá de cómo tienes el resto de elementos.

Mikel.

ssclamp · 02-jun-2008, 13:29

Mira si esto te sirve. He coloreado los fondos de los divisores para ver mejor el efecto.

Código HTML:

<body>
<div id="caja_envolvente" style="position: absolute; width:600px; height:300px; margin-left: -300px; margin-top: -150px; z-index:1; left: 50%; top: 50%; background-color:#C0C0C0">
<div style="position: absolute; width: 400px; margin-left: -200px; left: 50%">
	<div id="primer_divisor" style="width: 200px; height: 200px; float:left; background-color:#FFFF00">Contenido 1</div>
	<div id="segundo_divisor" style="width: 200px; height: 200px; float:left; background-color:#FF0000">Contenido 2</div>
</div>
</div>
</body>

También se puede centrar respecto a la altura.

Naturalmente los tamaños los debes adaptar a tu uso.

Saludos

guille_el3 · 03-jun-2008, 08:22

¿Centrados verticalmente?¿Horizontalmente? ¿uno al lado del otro?¿Uno encima del otro? =P

Saludos, Guille

Andrecitop · 03-jun-2008, 13:59

Cita:

Iniciado por ssclamp

Mira si esto te sirve. He coloreado los fondos de los divisores para ver mejor el efecto.

Código HTML:

<body>
<div id="caja_envolvente" style="position: absolute; width:600px; height:300px; margin-left: -300px; margin-top: -150px; z-index:1; left: 50%; top: 50%; background-color:#C0C0C0">
<div style="position: absolute; width: 400px; margin-left: -200px; left: 50%">
	<div id="primer_divisor" style="width: 200px; height: 200px; float:left; background-color:#FFFF00">Contenido 1</div>
	<div id="segundo_divisor" style="width: 200px; height: 200px; float:left; background-color:#FF0000">Contenido 2</div>
</div>
</div>
</body>

También se puede centrar respecto a la altura.

Naturalmente los tamaños los debes adaptar a tu uso.

Saludos

Gracias brother..lo voy a probar

Andrecitop · 03-jun-2008, 14:00

Cita:

Iniciado por guille_el3

¿Centrados verticalmente?¿Horizontalmente? ¿uno al lado del otro?¿Uno encima del otro? =P

Saludos, Guille

los dos div estan uno a lado de otro.... y lo quiero centrar horizontalmente con respecto al contenedor

Mikmoro · 03-jun-2008, 16:59

Otra manera:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>centrado</title>
<style type="text/css">
#contenedor { width: 600px;
height: 400px;
background-color: rgb(51, 153, 153);
margin: 50px auto;
}
#centrado { width: 440px;
margin: 0px auto;
}
#caja1, #caja2 { width: 200px;
height: 200px;
background-color: rgb(51, 102, 102);
margin-top: 20px;
}
#caja1 { float: left;}
#caja2 { float: right;}
</style>
</head>
<body>
<div id="contenedor">
<div id="centrado">
<div id="caja1"></div>
<div id="caja2"></div>
</div>
</div>
</body>
</html>

Mikel.

01-jun-2008, 13:54	#1 (permalink)
Andrecitop Fecha de Ingreso: septiembre-2007 Mensajes: 5	Centrar dos divs Hola miren tengo 2 divs dentro de un contenedor, los dos div estan uno al lado de otro, hasta ahi todo perfecto, ahora lo q necesito esq estos dos esten centrados con respecto al contenedor?????... estoy q me mato buscando forma alguna y naaa... Agradezco sus respuestas cierto el contenedor debe tener un width:auto;

01-jun-2008, 17:31	#2 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.998	Respuesta: Centrar dos divs Podrías probar poniendo a los dos divs display:inline; y a su contenedor text-align: center; aunque que funcione o no dependerá de cómo tienes el resto de elementos. Mikel.

03-jun-2008, 08:22	#4 (permalink)
guille_el3 Fecha de Ingreso: abril-2008 Mensajes: 260	Respuesta: Centrar dos divs ¿Centrados verticalmente?¿Horizontalmente? ¿uno al lado del otro?¿Uno encima del otro? =P Saludos, Guille

03-jun-2008, 14:00	#6 (permalink)
Andrecitop Fecha de Ingreso: septiembre-2007 Mensajes: 5	Respuesta: Centrar dos divs Cita: Iniciado por guille_el3 ¿Centrados verticalmente?¿Horizontalmente? ¿uno al lado del otro?¿Uno encima del otro? =P Saludos, Guille los dos div estan uno a lado de otro.... y lo quiero centrar horizontalmente con respecto al contenedor

03-jun-2008, 16:59	#7 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.998	Respuesta: Centrar dos divs Otra manera: Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> <head> <title>centrado</title> <style type="text/css"> #contenedor { width: 600px; height: 400px; background-color: rgb(51, 153, 153); margin: 50px auto; } #centrado { width: 440px; margin: 0px auto; } #caja1, #caja2 { width: 200px; height: 200px; background-color: rgb(51, 102, 102); margin-top: 20px; } #caja1 { float: left;} #caja2 { float: right;} </style> </head> <body> <div id="contenedor"> <div id="centrado"> <div id="caja1"></div> <div id="caja2"></div> </div> </div> </body> </html> Mikel.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado