CSS-Layout - Horizontale und vertikale Ausrichtung

Element zentriert

Horizontale und vertikale zentrierte Elemente

Zentrieren Sie das Element

Um Block-Elemente (z.B. <div>) horizontal zuzentrieren, verwenden Sie margin: auto;.

Die Festlegung der Breite des Elements verhindert, dass es bis zum Rand des Behälters erstreckt wird.

Dann wird das Element die angegebene Breite einnehmen, und der verbleibende Raum wird zwischen den Außenrändern gleichmäßig aufgeteilt:

Dieser div-Element ist zentriert.

Beispiel

.center {
  margin: auto;
  width: 50%;
  border: 3px fester grün;
  padding: 20px;
}

Probieren Sie selbst aus

Hinweis:Wenn nicht festgelegt width Eigenschaft (oder setzen Sie sie auf 100％), ist das Zentrieren nicht gültig.

Zentrieren Sie den Text

Wenn Sie nur den Text im Element zentrieren möchten, verwenden Sie text-align: center;:

Dieser Text ist zentriert.

Beispiel

.center {
  text-align: center;
  border: 3px fester grün;
}

Probieren Sie selbst aus

Tipp:Für mehr Beispiele zur Ausrichtung von Text, siehe CSS-Text Dieses Kapitel.

Zentrieren Sie das Bild

Wenn Sie das Zentrieren eines Bildes wünschen, setzen Sie die linken und rechten Außenränder auf autound legen Sie es als Blockelement fest: }}

Beispiel

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

Probieren Sie selbst aus

Linksbündig und Rechterbündig - verwenden Sie position

Eine Methode zur Ausrichtung von Elementen ist die Verwendung von position: absolute; :

Dieser div ist rechtsbündig.

Beispiel

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Probieren Sie selbst aus

Hinweis:Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können Elementüberschneidungen verursachen.

Linksbündig und Rechterbündig - verwenden Sie float

Eine andere Methode zur Ausrichtung von Elementen ist die Verwendung von float Eigenschaft:

Beispiel

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

Probieren Sie selbst aus

Hinweis:Wenn ein Element höher ist als das umschließende Element und es ist flottiert, wird es aus dem Container hinausragen. Sie können clearfix hack hinzufügen, um dieses Problem zu lösen (siehe untenstehendes Beispiel).

clearfix Hack

Dann können wir dem umschließenden Element overflow: auto;um dieses Problem zu lösen:

Beispiel

.clearfix {
  overflow: auto;
}

Probieren Sie selbst aus

vertikale Ausrichtung - verwenden Sie padding

Es gibt viele Möglichkeiten, Elemente in CSS vertikal auszurichten. Eine einfache Lösung ist die Verwendung von oberen und unteren Innenabständen:

Ich bin vertikal zentriert.

Beispiel

.center {
  padding: 70px 0;
  border: 3px fester grün;
}

Probieren Sie selbst aus

Wenn Sie gleichzeitig vertikal und horizontal ausrichten möchten, verwenden Sie padding und text-align: center;:

Ich bin horizontal und vertikal zentriert.

Beispiel

.center {
  padding: 70px 0;
  border: 3px fester grün;
  text-align: center;
}

Probieren Sie selbst aus

vertikale Ausrichtung - verwenden Sie line-height

Eine andere Technik ist die Verwendung vonseinem Wertentspricht height der Wert der Eigenschaft line-height Eigenschaft:

Ich bin horizontal und vertikal zentriert.

Beispiel

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

Probieren Sie selbst aus

vertikale Ausrichtung - verwenden Sie position und transform

Wenn Ihre Auswahl nicht padding und line-heightWenn eine andere Lösung ist, position und transform Eigenschaft:

Ich bin horizontal und vertikal zentriert.

Beispiel

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

Probieren Sie selbst aus

Tipp:Sie werden in 2D-Transformationen In diesem Kapitel lernen Sie mehr über die transform-Eigenschaft.

Vertikale Ausrichtung - Flexbox verwenden

Sie können auch Flexbox verwenden, um Inhalte zentral auszurichten. Beachten Sie, dass Flexbox in IE10 und älteren Versionen nicht unterstützt wird:

Ich bin horizontal und vertikal zentriert.

Beispiel

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px fester grün; 
}

Probieren Sie selbst aus

Tipp:Sie werden in meinem CSS Flexbox In diesem Kapitel lernen Sie mehr über Flexbox.