3 Techniques Essentielles pour Centrer des Éléments Inline-Block en CSS Avec Exemples

Pour centrer des éléments HTML qui ont la propriété display: inline-block, vous pouvez utiliser plusieurs approches en CSS, selon le type de centrage souhaité :

1. Centrer horizontalement avec text-align

Si les éléments sont contenus dans un parent, vous pouvez appliquer text-align: center au parent pour centrer horizontalement les éléments inline-block.

<div class="container">

  <div class="item">Élément 1</div>

  <div class="item">Élément 2</div>

</div>

.container {

  text-align: center;

}



.item {

  display: inline-block;

}

2. Centrer verticalement et horizontalement avec Flexbox

Si vous souhaitez centrer horizontalement et verticalement, utilisez display: flex sur le conteneur parent.

<div class="container">

  <div class="item">Élément 1</div>

  <div class="item">Élément 2</div>

</div>

.container {

  display: flex;

  justify-content: center;  Centre horizontalement 

  align-items: center;     Centre verticalement 

  height: 100vh;           Exemple pour occuper tout l'écran 

}



.item {

  display: inline-block;

}

3. Centrer avec position et transform

Une autre méthode consiste à positionner un élément de manière absolue et à le centrer à l'aide de transform.

<div class="container">

  <div class="item">Élément</div>

</div>

.container {

  position: relative;

  height: 100vh;  Exemple de hauteur 

}



.item {

  display: inline-block;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

Choisir la bonne méthode

Utilisez text-align si vous avez uniquement besoin de centrage horizontal.

Utilisez Flexbox pour un centrage vertical et horizontal dans un conteneur.

Utilisez position et transform si vous voulez un contrôle précis pour un élément spécifique.