Centrado de div dentro de div

cogoro · #1 (**permalink**) 10/11/2011, 17:53

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 chic@s!!

educacanis · #2 (**permalink**) 11/11/2011, 03:46

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

emprear · #3 (**permalink**) 11/11/2011, 10:54

medio complicado tu esquema

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

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#capa {
position:absolute;
top: 50%;
left: 50%;
width:800px;
height:550px;
margin-top: -275px; /*valor negativo mitad del alto*/
margin-left: -400px; /*valor negativo mitad del ancho*/
border: 2px solid #2982C6;
background-color: #FFF;
text-align: center;
}
 
div.moz
{
width:250px;
height:100px;
border:1px solid black;
 
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
 
/* Safari y Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
 
/* W3C */
display:box;
box-orient:horizontal;
transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
-moz-transform-origin: 100% 100%;
 
} 
/*]]>*/
</style>
</head>
<body>
<div id="capa">
        
<div class="moz">
div 1
</div>
<div class="moz">
div 2
</div>
<div class="moz">
div 3
</div>
 
</div>
</body>
</html>

Saludos

DrFaust · #4 (**permalink**) 11/11/2011, 15:13

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.

emprear · #5 (**permalink**) 11/11/2011, 15:21

Cita:

Iniciado por DrFaust

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#capa {
position:absolute;
top: 50%;
left: 50%;
width:800px;
height:550px;
margin-top: -275px; /*valor negativo mitad del alto*/
margin-left: -400px; /*valor negativo mitad del ancho*/
border: 2px solid #2982C6;
background-color: #FFF;
text-align: center;
}

Saludos

DrFaust · #6 (**permalink**) 11/11/2011, 18:27

+1 a vos, entonces. Perdón.