Vertical-align all'interno di un Div

thirdeyeblind82

Vertical-align all'interno di un Div

Ciao a tutti ragazzi!
Vi allego un'immagine per farvi capire più chiaramente qual'è il mio problema. A questo indirizzo potete vederla: imageshack.us/photo/my-images/849/graficoi.jpg

In non so l'altezza del DIV2 e dovrei centrarlo verticalmente col DIV1 (di cui invece so l'altezza).
Come posso fare?

prill

Ciao, si potrebbero usare le proprietà display:table e display:table-cell e quindi, come è possibile nelle tabelle, sfruttare il vertical-align. In questo caso però sarebbe necessario un css apposito per le vecchie versioni di Explorer che non riconoscono il display:table. Esempio:


...
<style type="text/css">

#esterno{
display:table;
width:400px;
height:400px;
vertical-align:middle;
overflow: hidden;
background:yellow; /* solo per visualizzare meglio l'esempio */
}
#boxContenuto {
display:table-cell;
width:100%;
vertical-align:middle;
}
#contenuto {
border:1px solid #000; /* solo per visualizzare meglio l'esempio */
}
</style>

<!--[if lt IE 8]>
<style type="text/css">{
position:relative;
}{top:50%;position:absolute;}{top:-50%;position:relative;}
</style>
<![endif]-->
</head>

<body>

 
<div id="esterno">
 <div id="boxContenuto">
   <div id="contenuto">
     Testo centrato in verticale
   </div>
 </div>
</div>
...

thirdeyeblind82

Grazie Prill!! Mi hai salvato la vita!!!!