Foros del Web - Centrar dos divs

Foros del Web (http://www.forosdelweb.com/)

- Diseño web (http://www.forosdelweb.com/f91/)

- - Centrar dos divs (http://www.forosdelweb.com/f91/centrar-dos-divs-592278/)

Andrecitop

01/06/2008 12:54

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;

Mikmoro

01/06/2008 16:31

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.

ssclamp

02/06/2008 12:29

Respuesta: Centrar dos divs

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/06/2008 07:22

Respuesta: Centrar dos divs

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

Saludos, Guille

Andrecitop

03/06/2008 12:59

Respuesta: Centrar dos divs

Cita:

Iniciado por ssclamp (Mensaje 2431089)

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/06/2008 13:00

Respuesta: Centrar dos divs

Cita:

Iniciado por guille_el3 (Mensaje 2432197)

¿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/06/2008 15:59

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.

La zona horaria es GMT -6. Ahora son las 23:43.