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 Attributtext-align: centerfestlegen 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 Attributdisplay: 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 Attributtext-align: centerfür den übergeordneten Container der Box fest.
   Dadurch werden alle Elemente auf Blockebene im übergeordneten Container, einschließlich Boxen, horizontal zentriert.

   Beispielcode:

   #parent { text-align: center; } #box { display: inline-block; }

   Nach dem Login kopieren

   Nach dem Login kopieren

   Anwendungsbeispiel:

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

   HTML:

    
   This box is centered horizontally.
    

   Nach dem Login kopieren
   CSS:

   #parent { text-align: center; } #box { display: inline-block; }

   Nach dem Login kopieren

   Nach dem Login kopieren
   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!