Maison >interface Web >tutoriel CSS >Comment puis-je centrer facilement une division horizontalement à l'aide de CSS ?

Comment puis-je centrer facilement une division horizontalement à l'aide de CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-23 21:46:10136parcourir

How Can I Easily Center a Div Horizontally Using CSS?

Centrage horizontal sans effort de <div> Éléments utilisant CSS

Centrage d'un <div> Un élément sur une page Web tout en conservant une largeur minimale peut être facilement obtenu en utilisant CSS. Pour ce faire :

Pour une largeur non fixe <div> Éléments :

Si vous ne connaissez pas l'espace exact, le <div> occupera, suivez ces étapes :

  1. Créez un conteneur wrapper (#wrapper) avec une largeur spécifiée et alignez manuellement le texte à l'intérieur (c'est-à-dire text-align: center;).
  2. Définissez le <div> à centrer en ligne à l'aide de display: inline-block;.
#wrapper {
  background-color: green; /* for visualization */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization */
  display: inline-block;
}
<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn