CSS-Layout - Horizontale & vertikale Ausrichtung

Horizontale & vertikale Zentrierung

Element-Zentrierung

Um ein Element (wie <div>) horizontal zu zentrieren, können Siemargin: auto; verwenden。

Das Festlegen der Breite des Elements verhindert, dass es über die Ränder des Containers hinausläuft.

Das Element wird zentriert, indem eine Breite angegeben und die leeren Außenabstände gleichmäßig auf beide Seiten verteilt werden:

Das div-Element wird zentriert


Beispiel

.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }

Selbst ausprobieren »

Hinweis:Wenn diewidth-Eigenschaft nicht festgelegt wird (oder wenn sie auf 100% gesetzt wird), funktioniert die Zentrierung nicht.

Textzentrierung

Wenn Sie nur den Text innerhalb eines Elements zentrieren möchten, können Sietext-align: center; verwenden

Textzentrierung


Beispiel

.center { text-align: center; border: 3px solid green; }

Selbst ausprobieren »

Tipp:Weitere Beispiele zur Textausrichtung finden Sie imCSS-Text-Kapitel.

Bild mittig ausrichten

Um ein Bild zu zentrieren, können Siemargin: auto;verwenden und es in einBlockelement einfügen:

Paris

Beispiel

img { display: block; margin: auto; width: 40%; }

Selbst ausprobieren »

Links-/Rechtsausrichtung – mit Positionierung

Wir können die Eigenschaftposition: absolute;verwenden, um Elemente auszurichten:

Beispiel-Tutorial -- Lernen ist nicht nur Technik, sondern auch Träume!!!


Beispiel

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #2167AD; padding: 10px; }

Selbst ausprobieren »

Hinweis:Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können andere Elemente überlappen.

Tipp:Wenn Siepositionverwenden, wird beim Ausrichten von Elementen normalerweise<body>das Element festlegenmarginundpadding. Dies kann sichtbare Unterschiede in verschiedenen Browsern vermeiden.

Bei Verwendung der position-Eigenschaft haben IE8 und frühere Versionen ein Problem. Wenn das Container-Element (in unserem Fall <div class="container">) eine festgelegte Breite hat und die !DOCTYPE-Deklaration ausgelassen wird, dann fügen IE8 und frühere Versionen einen zusätzlichen margin von 17px auf der rechten Seite hinzu. Dies scheint Platz für die Bildlaufleiste zu sein. Wenn Sie die position-Eigenschaft verwenden, legen Sie immer die !DOCTYPE-Deklaration fest:


Beispiel

body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }

Selbst ausprobieren »

Links-/Rechts-Ausrichtung - Verwendung der float-Methode

Wir können auch diefloat-Eigenschaft verwenden, um Elemente auszurichten:

Beispiel

.right { float: right; width: 300px; border: 3px solid #2167AD; padding: 10px; }

Selbst ausprobieren »

Wenn Sie Elemente wie diese ausrichten, ist es eine gute Idee, margin und padding des <body>-Elements vorab zu definieren. Dies vermeidet sichtbare Unterschiede in verschiedenen Browsern.

Hinweis: Wenn die Höhe des Kindelements größer als die des Elternelements ist und das Kindelement auf float gesetzt ist, dann läuft das Kindelement über. An dieser Stelle können Sie "clearfix(clear float)" verwenden, um dieses Problem zu lösen.

Wir können dem Elternelement overflow: auto; hinzufügen, um das Problem des Überlaufens von Kindelementen zu lösen:

Beispiel

.clearfix { overflow: auto; }

Selbst ausprobieren »

Bei Verwendung der float-Eigenschaft haben IE und frühere Versionen ein Problem. Wenn die !DOCTYPE-Deklaration weggelassen wird, fügen IE8 und frühere Versionen einen zusätzlichen margin von 17px auf der rechten Seite hinzu. Dies scheint Platz zu sein, der für die Bildlaufleiste reserviert ist. Wenn Sie die float-Eigenschaft verwenden, legen Sie immer die !DOCTYPE-Deklaration fest:

Beispiel

body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; }

Selbst ausprobieren »

Vertikale Zentrierung - Verwendung von padding

Es gibt viele Möglichkeiten in CSS, um eine vertikale Zentrierung zu erreichen. Eine einfache Möglichkeit ist, am oberen Rand des Headerspadding zu verwenden:

Ich bin vertikal zentriert.


Beispiel

.center { padding: 70px 0; border: 3px solid green; }

Selbst ausprobieren »

Wenn Sie sowohl horizontal als auch vertikal zentrieren möchten, können Siepaddingundtext-align: center verwenden:

Ich bin sowohl horizontal als auch vertikal zentriert.


Beispiel

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

Selbst ausprobieren »

Vertikale Zentrierung - mit line-height

Ich bin vertikal zentriert.


Beispiel

.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /*Wenn der Text mehrere Zeilen hat, fügen Sie den folgenden Code hinzu:*/ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }

Selbst ausprobieren »

Vertikale Zentrierung - mit position und transform

Zusätzlich zur Verwendung vonpaddingundline-heightNeben der Eigenschaft können wir auchtransformEigenschaft zum Festlegen der vertikalen Zentrierung:


Beispiel

.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Selbst ausprobieren »

Tipp:Für weitere Inhalte zur transform-Eigenschaft kannst du auf das2D-Flip-Kapitel verweisen。

Weitere Beispiele

CSS: margin zum Zentrieren von div verwenden

CSS: absolute Positionierung verwenden, um div rechts auszurichten

Weitere Erweiterungen