CSS - Centrar div con height en porcentaje

   
Vista:

Centrar div con height en porcentaje

Publicado por joan (1 intervención) el 31/10/2009 15:01:31
hola muy buenas a todos/as

tengu un div con un height en 100% i dentro de este una imagen. para empezar no puedo centrar este div i si pongo el div en 100% i centro la imagen centro del div, entonces la imagen no se redimensiona puesto que tambien esta en porcentaje.
tambien, el ancho del div contenedor no se adapta a la imagen que contiene. Si pongo el ancho en auto, se queda simplemente en 100%, es decir solo puedo controlar su ancho si pongo medidas estaticas.

llevo casi dos semanas con esto y no voy mejorando nada, estoy encallado y a punto de abandonar.
espero que alguien me pueda ayudar

aqui es dejo el condigo:

[CODE]<!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>
<link href="css/test.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--

html, body {
background:#000;
height:100%;
max-height:100%;
width:auto;

}

a {
outline:0;
outline:none;
border:none;
}
a img {
padding:5px;

}

#titDiv {

background: #000000;

padding: 10px;

}


#content {
background-color: #000000;
height:100%;
width:500px;

}





#layer1 {

position:relative;

top: 0%;

margin-top: -70px;


height:70px;

z-index:100;

background-image: url(../img/alpha.png);
background-repeat: repeat-x;

}



/* easy clearing */



.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}



.clearfix { display: inline-table; }



/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

#center {
position:relative;
top: 15px;
float: left;
width: 200px;
text-align: center;
vertical-align: middle;
margin-left:33%;


}

/*.numeros {
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
}*/

#right {
position:relative;
margin-right: 0px;
float: right;
top: 15px;
padding:5px;

}
#left {
position:relative;
float: left;
top: 15px;
padding:5px;
background-image: url(../img/img/fullScreen.png);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 40px;
width: 40px;
}

-->
</style>


</head>


<body>
<div id="content">

<img src="img.jpg" height="100%" />
<div id="layer1">

<a href="javascript:pantallacompleta('galeria_foto01G.html')"><div id="left" ></div>
</a>

<div id="center">
<a href="#"><img src="img/img/botons_12.png" border="0"/></a>
<a href="#"><img src="img/img/numeros/001-b.png" border="0" class="numeros" /></a>
<img src="img/img/separador.png" class="numeros" />
<a href="#"><img src="img/img/numeros/045.png" border="0" class="numeros" /></a>
<a href="#"><img src="img/img/botons_14.png" border="0" /></a> </div>

<div id="right" ><a href="../index.html" target="_self"><img src="img/img/contacte.png" border="0" /></a></div>
</div>
</div>

</body>
</html>[/CODE]
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder