Foros del Web » Creando para Internet » HTML »

Centrar varios div

Estas en el tema de Centrar varios div en el foro de HTML en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 18/04/2011, 20:41
 
Fecha de Ingreso: octubre-2007
Mensajes: 48
Antigüedad: 10 años, 1 mes
Puntos: 0
Centrar varios div

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
  #2 (permalink)  
Antiguo 18/04/2011, 23:18
Avatar de arepavieja  
Fecha de Ingreso: marzo-2011
Mensajes: 203
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Centrar varios div

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
__________________
La educación y la cortesía abren todas las puertas.
  #3 (permalink)  
Antiguo 19/04/2011, 01:24
 
Fecha de Ingreso: enero-2011
Mensajes: 93
Antigüedad: 6 años, 11 meses
Puntos: 7
Respuesta: Centrar varios div

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>
  #4 (permalink)  
Antiguo 19/04/2011, 07:22
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Centrar varios div

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
  #5 (permalink)  
Antiguo 19/04/2011, 12:57
 
Fecha de Ingreso: octubre-2007
Mensajes: 48
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Centrar varios div

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.
  #6 (permalink)  
Antiguo 19/04/2011, 13:12
 
Fecha de Ingreso: enero-2011
Mensajes: 93
Antigüedad: 6 años, 11 meses
Puntos: 7
Respuesta: Centrar varios div

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

Etiquetas: Ninguno
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 12:30.