So zentrieren Sie einen Bereich innerhalb eines Divs vertikal

Die vertikale Ausrichtung kann in CSS verwirrend sein, und das Ausrichten eines Bereichs innerhalb eines Divs ist nicht möglich Ausnahme.

Verstehen der CSS-Ausrichtung

Vorher Beim Eintauchen in Lösungen ist es wichtig, die vertikale Ausrichtung in CSS zu verstehen:

• Natürliche Ausrichtung: Inline-Elemente (wie span) werden auf natürliche Weise an der Grundlinie ausgerichtet. Das ist das Ende des niedrigsten Zeichens.
• Zeilenhöhe: Die Eigenschaft line-height legt die Höhe eines Zeilenfelds fest. die sowohl das Zeichen als auch alle führenden Leerzeichen einschließt.
• Intrinsische Höhe: Die intrinsische Höhe eines Elements ist der Platz, den es ohne Stilisierung oder Auffüllung einnimmt.

Vertikale Ausrichtungstechniken

Berücksichtigen Sie diese, um einen Bereich vertikal innerhalb eines Divs zu zentrieren Techniken:

1. Anpassen der Zeilenhöhe an die Containerhöhe:

Stellen Sie die Zeilenhöhe des Spans so ein, dass sie mit der Höhe des Div übereinstimmt. Wenn das Div beispielsweise 15 Pixel hoch ist, legen Sie line-height: 15px fest. auf der Spanne.

2. Absolute Positionierung:

Position festlegen: absolut; auf Div und Position: absolut; oben: 50 %; auf der Spanne. Passen Sie dann den oberen Randwert der Spanne auf die Hälfte ihrer inneren Höhe an.

3. Transformieren: TranslateY

Verwenden Sie die Transformation: TranslateY(-50%); Eigentum auf der Spannweite. Dadurch wird die Spanne vertikal um die Hälfte ihrer eigentlichen Höhe verschoben.

4. Flexbox

Verwenden Sie Flexbox, um die Spanne vertikal zu zentrieren. Anzeige einstellen: Flex; align-items: center; auf div und margin: auto; auf der Spanne.

Codebeispiel

Hier ist ein Beispiel mit der Zeilenhöhenmethode:

  as