Wie zentriere ich ein untergeordnetes Element innerhalb eines übergeordneten Elements mithilfe von CSS?

Zentrieren eines Elements innerhalb eines

Bei Verwendung von CSS zum Zentrieren eines Elements mit links: 50 %; erfolgt die Ausrichtung relativ zum gesamten Fenster. Wenn wir jedoch ein Element innerhalb eines übergeordneten

zentrieren, möchten wir, dass die Ausrichtung relativ zu seinem enthaltenden Element erfolgt.

Lösung

Um dies zu erreichen, können wir eine Textkombination verwenden -align: Mitte; und Rand: auto; CSS-Eigenschaften.

Schritt 1: Richten Sie das übergeordnete

Zentriert

Textausrichtung festlegen: zentriert; zum übergeordneten

Element. Dadurch werden alle untergeordneten Elemente darin zentriert.

Schritt 2: Zentrieren Sie das spezifische untergeordnete Element mithilfe der Marge

Sobald das übergeordnete

ausgerichtet ist, müssen wir das spezifische untergeordnete Element zentrieren. Rand anwenden: automatisch; zum untergeordneten Element. Dadurch wird das Element automatisch innerhalb des übergeordneten

zentriert, unabhängig von der Breite des untergeordneten Elements.

Zur Verdeutlichung hier ein Beispiel:

#parent {
  text-align: center;
  background-color: blue;
  height: 400px;
  width: 600px;
}

.child {
  height: 100px;
  width: 200px;
  text-align: left;
}

.center {
  margin: auto;
  background-color: green;
}

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein untergeordnetes Element innerhalb eines übergeordneten Elements mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!