Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Code zum horizontalen Zentrieren der Box

下次还敢
Freigeben: 2024-04-25 14:21:13
Original
398 Leute haben es durchsucht

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.

CSS-Code zum horizontalen Zentrieren der Box

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

    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>
    Nach dem Login kopieren
    🎜🎜CSS: 🎜🎜
    <code class="css">#parent {
      text-align: center;
    }
    
    #box {
      display: inline-block;
    }</code>
    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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage