Position absolue et centrages d'un élement HTML
Petite introduction à la manière dont on peut obtenir le centrage, à la fois vertical et horizontal, d'un élément HTML positionné en absolue.
Présentation
Nous souhaitons positionner un élément à l'intérieur d'un autre élément, plus précisément nous voulons avoir la possibilité de la placer au quatre coins de l'élément parent, centrer horizontalement ou verticalement ainsi que définir une position précise.
<div class="container">
<div class="box">
</div>
</div>
Pour la lisibilité du texte, nous appliquerons une hauteur définie au conteneur et une couleur de fond rouge à l'élément que l'on souhaite positionner.
.container {
position: relative;
height: 100px;
}
.box {
position: absolute;
background: #f00;
margin: 0;
width: 20px;
height: 20px;
}
/// <div class="container"><div class="box"></div></div> ///
L'alignement se fera par l'intermédiaire de 6 classes, qui permettront de définir 3 positions sur l'axe des abscisses et 3 sur celui des ordonnées :
- hStart, pour un alignement horizontal à gauche.
- hCenter, pour un alignement horizontal centré.
- hEnd, un alignement horizontal à droite.
- vStart, un alignement vertical en haut.
- vCenter, un alignement vertical au milieu.
- vEnd, un alignement vertical en bas.
Le positionnement de l'élément sera donc la résultante de la combinaison de deux classes, la première pour le vecteur horizontal (hStart, hCenter ou hEnd), la seconde pour le vecteur vertical (vStart, vCenter ou vEnd).
Positionnement aux quatres coins
Les positionnements aux quatres coins du conteneur peuvent s'obtenir aisément en utilisant les 4 propriétés CSS de position : top
, right
, bottom
et left
.
/* Positionnement horizontal à gauche */
.hStart {
left: 0;
}
/* Positionnement horizontal à droite */
.hEnd {
right: 0;
}
/* Positionnement vertical en haut */
.vStart {
top: 0;
}
/* Positionnement vertical en bas */
.vEnd {
bottom: 0;
}
<div class="container">
<div class="box hStart vStart"></div>
<div class="box hEnd vStart"></div>
<div class="box hStart vEnd"></div>
<div class="box hEnd vEnd"></div>
</div>
/// <div class="container"> <div class="box hStart vStart"></div> <div class="box hEnd vStart"></div> <div class="box hStart vEnd"></div> <div class="box hEnd vEnd"></div> </div> ///
Centrages
Pour les positions centrées, il faut jouer avec le couple de propriétés dédié à chaque axe (top
et bottom
pour l'axe vertical, left
et right
pour l'axe horizontal) ainsi que sur les marges externes (margin
) de la boîte.
/* Centrage vertical */
.vCenter {
bottom: 0;
top: 0;
margin-top: auto;
margin-bottom: auto;
}
/* Centrage horizontal */
.hCenter {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Nous avons vu que dans certains cas, la déclarations des 2 propriétés de position liées à un axe permettent d'étendre la taille de la boîte ; ici, les tailles étant explicitement déclarées, elles prévalent. L'alignement centré s'obtient grâce à la valeur « auto » appliquée aux marges externes et le calcul de la position que doivent effectuer les navigateurs web suivant les spécifications CSS :
If none of the three ['left', 'width', and 'right'] is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values [...]
[...]
If none of the three ['top', 'height', and 'bottom'] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.
<div class="container">
<div class="box hCenter vStart"></div>
<div class="box hEnd vCenter"></div>
<div class="box hCenter vEnd"></div>
<div class="box hStart vCenter"></div>
<div class="box hCenter vCenter"></div>
</div>
/// <div class="container"> <div class="box hCenter vStart"></div> <div class="box hEnd vCenter"></div> <div class="box hCenter vEnd"></div> <div class="box hStart vCenter"></div> <div class="box hCenter vCenter"></div> </div> ///
Ressources et références
- chapter
- Visual formatting model details
°°ref°° art.css-pos-size