CSS-Code zum horizontalen Zentrieren der Box

Um die Box horizontal zu zentrieren, können Sie das Attribut „text-align: center“ für den übergeordneten Container festlegen. Die spezifischen Schritte sind wie folgt: 1. Legen Sie das Attribut „display: inline-block“ fest. 2. Legen Sie das text-align:center-Attribut für den übergeordneten Container der Box fest.

So verwenden Sie CSS, um die Box horizontal zu zentrieren

Direkte Antwort:

Um die Box horizontal zu zentrieren, können Sie das Attribut text-align: center festlegen auf seinem übergeordneten Container. text-align: center 属性。

详细说明：

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

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

Um das Feld horizontal zentriert zu machen, müssen Sie die folgenden Schritte ausführen:

1. Legen Sie das Attribut display: inline-block; für das Feld fest .

   Dadurch wird die Box zu einem Element auf Blockebene und kann horizontal platziert werden.

2. Legen Sie das Attribut text-align: center für den übergeordneten Container der Box fest.
   Dadurch werden alle Elemente auf Blockebene im übergeordneten Container, einschließlich Boxen, horizontal zentriert.

   Beispielcode:

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

   Anwendungsbeispiel:

   Fügen Sie den folgenden HTML- und CSS-Code zu Ihrer Seite hinzu:

   🎜🎜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>

   🎜 Ebene Zentrieren Sie eine Box mit der Text „Dieses Feld ist horizontal zentriert.“ 🎜

Das obige ist der detaillierte Inhalt vonCSS-Code zum horizontalen Zentrieren der Box. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!