Foros del Web » Creando para Internet » Diseño web »

Centrar dos divs

Estas en el tema de Centrar dos divs en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/06/2008, 13:54
 
Fecha de Ingreso: septiembre-2007
Mensajes: 7
Antigüedad: 10 años, 2 meses
Puntos: 0
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;
  #2 (permalink)  
Antiguo 01/06/2008, 17:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #3 (permalink)  
Antiguo 02/06/2008, 13:29
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
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
  #4 (permalink)  
Antiguo 03/06/2008, 08:22
 
Fecha de Ingreso: abril-2008
Mensajes: 264
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Centrar dos divs

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

Saludos, Guille
  #5 (permalink)  
Antiguo 03/06/2008, 13:59
 
Fecha de Ingreso: septiembre-2007
Mensajes: 7
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Centrar dos divs

Cita:
Iniciado por ssclamp Ver Mensaje
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
  #6 (permalink)  
Antiguo 03/06/2008, 14:00
 
Fecha de Ingreso: septiembre-2007
Mensajes: 7
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Centrar dos divs

Cita:
Iniciado por guille_el3 Ver Mensaje
¿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
  #7 (permalink)  
Antiguo 03/06/2008, 16:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
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 05:41.