Comment centrer un élément HTML avec les CSS,

Les webmasters et développeurs web sont souvent amener à centrer les éléments html lors de la conception d’une page web. Cela n’est à fortiori pas un problème. Il s’agit juste d’avoir les connaissances fondamentales concernant notamment le type d’élément html que l’on souhaite centrer. Verticalement ou horizontalement.

Centrer du texte ou un élément inline horizontalement

Rien de plus simple. Il suffit d’appliquer à l’élément conteneur la propriété suivante :

text-align:center

Pour rappel, en HTML, un élément de type inline est par défaut sont : img, span, strong, em, italic, etc…

Centrer un élément de type bloc horizontalement

Là encore, c’est facile. Cette fois ci, il suffit d’appliquer à l’élément que l’on souhaite centrer des marges droite et gauche équivalentes de la manière suivante :

margin: 0 auto

Attention : pour centrer un bloc dans son conteneur, il est nécessaire de s’assurer que celui-ci soit plus étroit que son conteneur

Et laisser tomber la veille balise <center>, elle est vraiment dépasée !

Centrer verticalement un élément de type inline

On va jouer ici avec la propriété line-height. Exemple :

p.milieu{
    text-align:center; /* alignement horizontal */
    height:300px;
    line-height: 300px;
    border: 2px solid grey; /* alignement vertical */
}

Centrer verticalement un élément de type block

Pour centrer verticalement un élément de type bloc, on le positionne à 50% du haut de son conteneur puis on spécifie une marge négative de 50% du bloc à centrer. Ce dernier doit être en position absolue  et son conteneur doit être positionné (si pas le mettre en relatif)

.conteneur{
    position:relative;
}

.bloc-centre{
    position:absolute;
    height:200px;
    margin:-100px;
}

La technique fonctionne également pour un centrage horizontal.

Pour en apprendre plus, vous pouvez toujours vous former au HTML CSS sur Internet ou avec VeStudio.

Comment centrer un élément HTML avec les CSS,
Votez pour ce billet !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *