Comment centrer parfaitement un élément en HTML CSS ?

Lorsque vous créez un site web, vous voulez que tout soit présenté de manière professionnelle et soignée. L'une des choses les plus importantes à prendre en compte est la mise en page des éléments. Aujourd'hui, nous allons vous montrer comment centrer correctement un élément en HTML et en CSS.

La première chose à faire est de créer un élément HTML qui sera centré. Pour cela, vous pouvez utiliser n'importe quel élément HTML, comme un paragraphe ou une image. Dans cet exemple, nous utiliserons un texte.

<p>Texte centré</p>        

Ensuite, vous devez ajouter du CSS pour centrer cet élément. Il existe plusieurs façons de centrer un élément en CSS, mais nous allons vous montrer deux méthodes simples.

Méthode 1: Centrer horizontalement uniquement

Si vous ne voulez centrer votre élément qu'horizontalement, vous pouvez utiliser la propriété CSS `text-align`. Cela fonctionne bien pour les éléments en ligne comme les textes ou les images.

p {

 text-align: center;

}        

Dans cet exemple, la propriété `text-align` est définie sur le paragraphe. Cela permet de centrer le texte dans le paragraphe horizontalement.

Méthode 2: Centrer horizontalement et verticalement

Si vous voulez centrer votre élément horizontalement et verticalement, il est recommandé d'utiliser la propriété CSS `display: flex`. Cette méthode fonctionne mieux pour les éléments qui ont une hauteur définie, comme une boîte de contenu ou un conteneur d'image.

.container {

   display: flex;
  
   justify-content: center;
  
   align-items: center;
  
   height: 100vh;
  
}

p {
   text-align: center;
}          

Dans cet exemple, le conteneur a une classe `.container` qui définit `display: flex`. Les propriétés `justify-content` et `align-items` sont également définies sur `center` pour centrer l'élément horizontalement et verticalement.

Enfin, la hauteur du conteneur est définie sur `100vh`. Cela signifie qu'il prendra la hauteur de 100% de la vue actuelle, ce qui permettra de centrer l'élément parfaitement.

En conclusion, il existe plusieurs façons de centrer un élément en HTML et en CSS. Utilisez la méthode qui convient le mieux à votre situation, et n'oubliez pas de tester sur différents navigateurs pour vous assurer que votre site est bien centré pour tout le monde.

Si tu as aimé n'hésite pas à t'abonner et me lâcher un pousse bleu.

à très bientôt.

Elvin Kyungu, Front-end web developer