Foros del Web » Creando para Internet » CSS »

Centrado de div dentro de div

Estas en el tema de Centrado de div dentro de div en el foro de CSS en Foros del Web. Muy buenas gente!! Tengo un trabajo de la uni con css y me estoy volviendo loco. Tengo que crear una galeria hexagonal de imagenes con ...
  #1 (permalink)  
Antiguo 10/11/2011, 16:53
 
Fecha de Ingreso: noviembre-2006
Mensajes: 3
Antigüedad: 12 años, 7 meses
Puntos: 0
Centrado de div dentro de div

Muy buenas gente!!

Tengo un trabajo de la uni con css y me estoy volviendo loco. Tengo que crear una galeria hexagonal de imagenes con un marco. Todo esto dentro de un div para poder centrarlo todo en la página web.

El tema es que la imagen que hay dentro del marco no consigo que se centre. Tengo que usar los atributos:

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

pero no se me centra, y creo que es por el USo de position, pero no me aclaro. Pido ayuda por si alguien podría ayudarme.

Aqui teneis el link del html y las imagenes(no tiene virus xD): [URL="http://www.megaupload.com/?d=8YKF98GG"]http://www.megaupload.com/?d=8YKF98GG[/URL]

También pego el código, por si no quereis descargarlo:

Código:
<!DOCTYPE HTML>
<meta charset="UTF-8">

<style type="text/css">
	img{
		height:100%;
		width:100%;
	}
	
	.container_imagen{
		position:absolute;
		border: 1px solid gray;
		height: 90%;
		width: 90%;
		
	}
	.marco:focus{
		left:207px !important;
		top:250.34px !important;
		-moz-transform:rotate(0deg) !important;
		width:360px !important;
		height:255px !important;
		z-index: 10;
		
	}
	
	
	.marco{
	
		position:absolute;
		width:240px;
		height:170px;
		background-color:#0B3861;
		//border:1px solid black;
		
		display: -moz-box; //con el moz-box activado el redimensionamiento falla
		-moz-box-orient: horizontal;
		-moz-box-pack: center;
		-moz-box-align: center;
		
	}
	
	.marco#uno{
		left:267px;
		top:0px;
	}
	
	.marco#dos{
		transform:rotate(60deg);
		-moz-transform:rotate(60deg);
		-moz-transform-origin: 0% 100%;
		
		left:507px;
		top:0px;
	}
	
	.marco#tres{
		transform:rotate(-60deg);
		-moz-transform:rotate(-60deg);
		-moz-transform-origin: 0% 0%;
		
		left:507px;
		top:585.68px;
	}
	
	.marco#cuatro{
		left:267px;
		top:585.68px;
	}
	
	.marco#cinco{
		transform:rotate(60deg);
		-moz-transform:rotate(60deg);
		-moz-transform-origin: 100% 0%;
		
		left:27px;
		top:585.68px;
	}
	
	.marco#seis{
		transform:rotate(-60deg);
		-moz-transform:rotate(-60deg);
		-moz-transform-origin: 100% 100%;
		
		left:27px;
		top:0px;
	}
	
	
	.container{
		border:1px solid red;
		width:775px;
		height:758px;
		
	}
	
	.container_todo{
		position:relative;
		
		width:50%;
		height:100%;
		
		display: -moz-box; //con el moz-box activado el redimensionamiento falla
		-moz-box-orient: horizontal;
		-moz-box-pack: center;
		-moz-box-align: center;
	}
</style>

<html lang="es">
<head>
	<title>Galeria de Imagenes</title>
</head>
<body>
	<div class="container_todo">
	
		<div class="container">
			<div class="marco" id="uno" tabindex="1">
				<div class="container_imagen">
					<img src="imagenes/space1.jpg">
				</div>
			</div>
			<div class="marco" id="dos" tabindex="2">
				<div class="container_imagen">
					<img src="imagenes/space2.jpg">
				</div>
			</div>
			<div class="marco" id="tres" tabindex="3">
				<div class="container_imagen">
					<img src="imagenes/space3.jpg">
				</div>
			</div>
			<div class="marco" id="cuatro" tabindex="4">
				<div class="container_imagen">
					<img src="imagenes/space4.jpg">
				</div>
			</div>
			<div class="marco" id="cinco" tabindex="5">
				<div class="container_imagen">
					<img src="imagenes/space5.jpg">
				</div>
			</div>
			<div class="marco" id="seis" tabindex="6">
				<div class="container_imagen">
					<img src="imagenes/space6.jpg">
				</div>
			</div>
		</div>
		
	</div>
	
		
</body>
</html>
Muchisimas gracias, si me echais una mano me ayudareis muchisimo [email protected]!!

Última edición por cogoro; 11/11/2011 a las 00:23
  #2 (permalink)  
Antiguo 11/11/2011, 02:46
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 8 años, 8 meses
Puntos: 12
Respuesta: Centrado de div dentro de div

Una forma de centrar horizontalmente los elementos es con la siguiente expresión:

Código:
margin: 0 auto;
esto permite alinear los elementos dentro de una página. Creo que igualmente sirve para alinear elementos dentro de otros elementos.

Ya me contarás si funciona
  #3 (permalink)  
Antiguo 11/11/2011, 09:54
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años
Puntos: 1567
Respuesta: Centrado de div dentro de div

medio complicado tu esquema

empezá por esto y fijate de acomodar tus imágenes

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. #capa {
  11. position:absolute;
  12. top: 50%;
  13. left: 50%;
  14. width:800px;
  15. height:550px;
  16. margin-top: -275px; /*valor negativo mitad del alto*/
  17. margin-left: -400px; /*valor negativo mitad del ancho*/
  18. border: 2px solid #2982C6;
  19. background-color: #FFF;
  20. text-align: center;
  21. }
  22.  
  23. div.moz
  24. {
  25. width:250px;
  26. height:100px;
  27. border:1px solid black;
  28.  
  29. /* Firefox */
  30. display:-moz-box;
  31. -moz-box-orient:horizontal;
  32.  
  33. /* Safari y Chrome */
  34. display:-webkit-box;
  35. -webkit-box-orient:horizontal;
  36.  
  37. /* W3C */
  38. display:box;
  39. box-orient:horizontal;
  40. transform:rotate(-60deg);
  41. -moz-transform:rotate(-60deg);
  42. -moz-transform-origin: 100% 100%;
  43.  
  44. }
  45. /*]]>*/
  46. </head>
  47. <div id="capa">
  48.        
  49. <div class="moz">
  50. div 1
  51. </div>
  52. <div class="moz">
  53. div 2
  54. </div>
  55. <div class="moz">
  56. div 3
  57. </div>
  58.  
  59. </div>
  60. </body>
  61. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 11/11/2011, 14:13
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 7 años, 9 meses
Puntos: 87
Respuesta: Centrado de div dentro de div

Un truco que puede serte de utilidad.

Imaginate que tenés un DIV grande, un DIV chiquito dentro de éste, ambos están posicionados de forma absoluta, y querés centrar #chiquito. Probá con esto:

#grande {
position:absolute;
}

#chiquito {
position:absolute;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
}

Básicamente le das left:50% para que el borde izquierdo del elemento caiga justo a la mitad de su padre, y luego le das un margin-left negativo igual a la mitad del ancho del elemento. Lo mismo para top.

Para que este truco funcione, el padre tiene que tener la propiedad position en absolute, relative o fixed.
__________________
Desarrollador web profesional
  #5 (permalink)  
Antiguo 11/11/2011, 14:21
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años
Puntos: 1567
Respuesta: Centrado de div dentro de div

Cita:
Iniciado por DrFaust Ver Mensaje
Un truco que puede serte de utilidad.

...

Básicamente le das left:50% para que el borde izquierdo del elemento caiga justo a la mitad de su padre, y luego le das un margin-left negativo igual a la mitad del ancho del elemento. Lo mismo para top.
.
creo haber dicho lo mismo
Código CSS:
Ver original
  1. #capa {
  2. position:absolute;
  3. top: 50%;
  4. left: 50%;
  5. width:800px;
  6. height:550px;
  7. margin-top: -275px; /*valor negativo mitad del alto*/
  8. margin-left: -400px; /*valor negativo mitad del ancho*/
  9. border: 2px solid #2982C6;
  10. background-color: #FFF;
  11. text-align: center;
  12. }
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 11/11/2011, 17:27
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 7 años, 9 meses
Puntos: 87
Respuesta: Centrado de div dentro de div

+1 a vos, entonces. Perdón.
__________________
Desarrollador web profesional

Etiquetas: html, imagenes, centrar
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 23:55.