Centrar varios div

AndreasColor · #1 (**permalink**) 18/04/2011, 19:41

Hola, estoy intentando centrar esto en un blog de blogger:

<style>
.imagenContainer{
float:none
}
</style>

<div>
<div style="float:left;width:75px;" >
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
</div>
<div style="float:left">
<object width="440" height="247" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="videojuicer_seed_pokerstars_presentation_5402" >
<param name="movie" value="http://player.videojuicer.com/bootstrap.swf"/>
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars" value="seed_name=pokerstars&heritage_id=b3d835df-af22-4cf1-bdd3-5e9ad000d93e:&presentation_id=5402"/>
<param name="name" value="videojuicer_seed_pokerstars_presentation_54 02"/>
<param name="wmode" value="transparent"/>
<embed src="http://player.videojuicer.com/bootstrap.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" flashvars="seed_name=pokerstars&heritage_id=b3d835 df-af22-4cf1-bdd3-5e9ad000d93e:&presentation_id=5402" width="440" height="247" name="videojuicer_seed_pokerstars_presentation_540 2" wmode="transparent"/>
</embed></object>
</div>
<div style="float:right;left:75px;" >
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
<div class="imagenContainer"><img height="41px" width="73px" src="" /></div>
</div>
</div>

¿Alguien sabe como lo puedo hacer?

Estoy haciendo pruebas en esta url http://www.elpadreapeles.com/ y ahora mismo sale a la izq como se ve, quiero que todo el conjunto salga en el centro.

Agradecería vuestra ayuda.

Un saludo

arepavieja · #2 (**permalink**) 18/04/2011, 22:18

ponle margin: 0px auto; a todos los div o al contenedor principal.

Esto quiere decir que para top y bottom no existe, pero para left y right buscara un perfil medio entre ambos lados

nedyer · #3 (**permalink**) 19/04/2011, 00:24

0o' bueno la verdad es algo fácil de hacer pero te digo que estas manejando mal el css y las cajas div te dejo este codigo aver si asi es como lo quieres

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.Caja_Principal {
padding: 0px;
height: 200px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.Bloque_1 {
padding: 0px;
float: left;
height: 200px;
width: 100px;
}
.Bloque_2 {
padding: 0px;
float: left;
height: 200px;
width: 400px;
}
.Bloque_3 {
float: right;
height: 200px;
width: 100px;
}
.Imagenes {
padding: 0px;
height: 25px;
width: 100px;
float: left;
}
</style>
</head>

<body>
<div class="Caja_Principal" id="Caja_Principal">
<div class="Bloque_1" id="Bloque_1">
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
</div>
<div class="Bloque_2" id="Bloque_2"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="videojuicer_seed_pokerstars_presentation_540 2" width="400" height="200" id="videojuicer_seed_pokerstars_presentation_5402 " >
<param name="movie" value="http://player.videojuicer.com/bootstrap.swf"/>
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars" value="seed_name=pokerstars&heritage_id=b3d835df-af22-4cf1-bdd3-5e9ad000d93e:&presentation_id=5402"/>
<param name="name" value="videojuicer_seed_pokerstars_presentation_54 02"/>
<param name="wmode" value="transparent"/>
<embed src="http://player.videojuicer.com/bootstrap.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" flashvars="seed_name=pokerstars&heritage_id=b3d835 df-af22-4cf1-bdd3-5e9ad000d93e:&presentation_id=5402" width="400" height="200" name="videojuicer_seed_pokerstars_presentation_540 2" wmode="transparent"/>
</embed></object></div>
<div class="Bloque_3" id="Bloque_3">
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
<div class="Imagenes" id="Imagenes"><img src="" alt="" name="Imagen" width="100" height="25" id="Imagen" /></div>
</div>
</div>
</body>
</html>

saul123 · #4 (**permalink**) 19/04/2011, 06:22

Hola AndreasColor

Yo lo meteria en un contenedor y el contenedor le daba margin:0 auto 0 auto; y despues colocaba las cajas de los divs

AndreasColor · #5 (**permalink**) 19/04/2011, 11:57

Que tal,

He probado de las 3 maneras que me decís y nada, lo más cercano a como lo quiero lo he conseguido poniendo el código que a posteado nedyer, pero sigue sin salir en el centro.

No sé si sabéis como funciona blogger pero mi duda es que no sé si el problema será que estoy metiendo el código en un gadget de la plantilla de blogger (donde se puede insertar código HTML/Javascript) y en realidad tendría que meter el código en la propia plantilla...

En fin, ando un poco bastante perdido...

Gracias de nuevo.

nedyer · #6 (**permalink**) 19/04/2011, 12:12

tu quieres que el video salga en el centro 0o' entre los dos bloques de imagenes que tienes alli??