Centrar dos divs

Andrecitop · #1 (**permalink**) 01/06/2008, 12: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 · #2 (**permalink**) 01/06/2008, 16: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 · #3 (**permalink**) 02/06/2008, 12: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 · #4 (**permalink**) 03/06/2008, 07:22

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

Saludos, Guille

Andrecitop · #5 (**permalink**) 03/06/2008, 12: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 · #6 (**permalink**) 03/06/2008, 13: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 · #7 (**permalink**) 03/06/2008, 15: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.