Il se peut que vous ayez besoin de
centrer verticalement un bloc (fils) dans un bloc div (parent).
Si vous connaissez la hauteur du fils alors pas de problème, vous utiliserez une combinaison de css position, top et margin-top.
Exemple de code :
#parent{
width:150px;
height:150px;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
#fils{
width:50px;
height:50px;
border:1px solid red;
margin-left:auto;
margin-right:auto;
position:relative;
top:50%;
margin-top:-25px;
}La valeur négative de
margin-top représente la moitié de
heightCode HTML :Exemple de code :
<div id="parent"><div id="fils">Vertical</div></div>Résultat :
Dans le cas où vous
ne pouvez pas déterminer la hauteur du fils, je n'ai pas trouvé de solution en css. La seule solution que j'ai trouvé, est de passer par le javascript voici un exemple à tester.
Code Javascript : Exemple de code :
<script type="text/javascript">
function centreVerticale(){
var elementCentrageV = new Array("fils2","fils3");
for(var i=0;i<elementCentrageV.length;i++){
var parent = document.getElementById(elementCentrageV[i]);
parent.style.marginTop = "-"+ (parent.clientHeight/2) +"px";
}
}
window.onload = centreVerticale;
</script>Exemple de code :
#parent{
width:250px;
height:250px;
border:1px solid red;
}
#fils2,#fils3{
width:150px;
height:150px;
border:1px solid red;
margin-left:auto;
margin-right:auto;
position:relative;
top:50%;
}
#fils3{
width:50px;
height:50px;
}Exemple de code :
<div id="parent"><div id="fils2"><div id="fils3">Vertical</div></div></div>