Maison > interface Web > tutoriel CSS > le corps du texte

Code CSS pour centrer la boîte horizontalement

下次还敢
Libérer: 2024-04-25 14:21:13
original
397 Les gens l'ont consulté

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.

Code CSS pour centrer la boîte horizontalement

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
  3. 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>
    Copier après la connexion
    Copier après la connexion

    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>
    Copier après la connexion
    🎜🎜CSS : 🎜🎜
    <code class="css">#parent {
      text-align: center;
    }
    
    #box {
      display: inline-block;
    }</code>
    Copier après la connexion
    Copier après la connexion
    🎜 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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal