Code CSS pour centrer la boîte horizontalement

Pour centrer la boîte horizontalement, vous pouvez définir l'attribut text-align: center sur son conteneur parent. Les étapes spécifiques sont les suivantes : 1. Définissez l'attribut display: inline-block pour la boîte. 2. Définissez l'attribut text-align: center pour le conteneur parent de la boîte.

Comment utiliser CSS pour centrer la boîte horizontalement

Réponse directe :

Pour centrer la boîte horizontalement, vous pouvez définir l'attribut text-align: center sur son conteneur parent. text-align: center 属性。

详细说明：

要让盒子水平居中，需要执行以下步骤：

1. 为盒子设置 display: inline-block; 属性。 这将使盒子成为块级元素，并允许对其进行水平设置。
2. 为盒子的父容器设置 text-align: center
Détails :

Pour centrer la boîte horizontalement, vous devez effectuer les étapes suivantes :

1. Définissez l'attribut display: inline-block; pour la boîte .

   Cela fera de la boîte un élément de niveau bloc et lui permettra d'être définie horizontalement.

2. Définissez l'attribut text-align: center pour le conteneur parent de la boîte.
   Cela centrera horizontalement tous les éléments au niveau du bloc dans le conteneur parent, y compris les boîtes.

   Exemple de code :

   <code class="css">#parent {
     text-align: center;
   }
   
   #box {
     display: inline-block;
   }</code>

   Exemple d'application :

   Ajoutez le code HTML et CSS suivant à votre page :

   🎜🎜HTML : 🎜🎜

   <code class="html"><div id="parent">
     <div id="box">This box is centered horizontally.</div>
   </div></code>

   🎜🎜CSS : 🎜🎜

   <code class="css">#parent {
     text-align: center;
   }
   
   #box {
     display: inline-block;
   }</code>

   🎜 niveau Centrer une boîte avec le texte "Cette case est centrée horizontalement." 🎜

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!