Hexa PAGE - Classes - Centrage

Le centrage avec CSS n'est pas toujours chose aisé. Cette bibliothèque facilite les choses.

Centrage du texte dans un élément

Voir Hexa PAGE - Classes - Texte

Centrage d'éléments sur une ligne flexible

Voir Hexa PAGE - Classes - Alignements

Centrage horizontal et vertical

<section style="height:200px" class="hx-relative">
<span class="hx-center-h">h</span>
<span class="hx-center-v">v</span>
<span class="hx-center-hv">hv</span>
</section>

Ces classes permettent de centrer un élément au sein d'un élément parent sur les axes horizontal et vertical.

• hx-center-h
  L'élément est positionné au centre de son élément parent suivant l'axe horizontal.
• hx-center-v
  L'élément est positionné au centre de son élément parent suivant l'axe vertical.
• hx-center-hv
  L'élément est positionné au centre de son élément parent suivant les axes horizontal et vertical.

La classe hx-relative utilisée dans l'exemple n'est pas utile. Cependant, elle l'aurait été si le conteneur section n'avait pas eu la propriété "position:relative" dans les feuilles de styles CSS du site.
Les éléments sont positionnés de manière absolue par rapport à leur conteneur qui, lui, doit être positionné de manière relative par rapport aux conteneurs qui le précèdent.