Alinhar div verticalmente, em relação a outra div

[Pedro Castilho 0]

Olá,

 

Tenho uma div #content que tem altura e largura de 80% do body, ou seja, ao redimensionar a janela, ela acompanha. Dentro dela, tem uma div #box que gostaria que estivesse alinhada verticalmente em relação à div #content.

Com margin ou padding, não funciona, pois a altura varia de acordo com o tamanho da janela, e a div #box deve acompanhar. Também coloquei valores com porcentagem no margin e no padding, mas a div não acompanha.

É possível fazer isso de outra forma?

 

[William Bruno 1501]

qual é o alinhamento q vc quer da #box ?

 

centro vertical ?

[Heitor Sousa 9]

Cara, não sei se o que você precisa é necessário %, normalmente eu prefiro não usar e fazer assim:

 

CSS

<style type="text/css">
#content {
	margin:0 auto;
	width: 970px;
	background-color:#00F;
	height: 700px;
}
#box {
	background-color:#F99;
	float:left;
	margin-top:200px;
	margin-left:80px;
	width: 800px;
	height:300px;

}
#img {
	background-color:#0C0;
	float:left;
	margin-top:90px;
	margin-left:50px;
	width: 350px;
	height: 115px;
}
#texto {
	background-color:#0C0;
	float:right;
	margin-top:90px;
	margin-right:20px;
	width: 350px;
	height: 115px;
}
</style>

HTML

 

<div id="content">


  <div id="box">
  
    <div id="img"></div>
    <div id="texto"></div>
  </div>
</div>

[Pedro Castilho 0]

qual é o alinhamento q vc quer da #box ?

 

centro vertical ?

 

Centro horizontalmente já está, preciso que a #box esteja alinhada no centro verticalmente. Ao redimensionar a janela, a #content redimensiona junto, pois está com porcentagem, a #box deve acompanhar no centro da #content.

[stromdh 15]

cara, posso te sugerir colocar as div's #img e #texto dentro de uma outra, e lá dentro vc dá um float left/right dentro delas, dae usa o seguinte código:

 

#content {
     display: table;
     height: 400px;
     #position: relative;
     overflow: hidden;
}
#box {
     #position: absolute;
     #top: 50%;
     display: table-cell;
     vertical-align: middle;
}

#guardaImgTexto {
     #position: relative;
     #top: -50%
}

 

testa ae.