• Astuces CSS • Alignement vertical d'un objet •

L'alignement vertical d'un texte est simple à gérer grâce à la propriété vertical-align, mais qu'en ait-il des autres éléments ? Comment aligner un élément au centre d'une page ou d'un autre élément ?
La solution se trouve ci-dessous.


Child
HTML
<div class="parent">
<div class="child"> Child </div>
</div>
CSS
#parent {
width: 200px;
height: 100px; /*Important !*/
border: 1px solid;
background-color: LightSteelBlue;
}

#child {
width: 50px;
height: 50px; /*Important !*/
background-color: AliceBlue;
position: relative; /*Important !*/
margin-left : auto; /*Alignement horizontal*/
margin-right: auto; /*Alignement horizontal*/
top : 50%; /*Important !*/
margin-top : -25px; /*Important !*/
}

Le top à 50% permet de positionner le fils à la moitié de la hauteur du père. Pour que le fils soit bien centré, il faut lui indiquer un margin-top négatif de la moitié de sa taille.