Wie zentriere ich einen Span innerhalb eines Div in CSS vertikal?

So zentrieren Sie einen Span innerhalb eines Divs vertikal

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

CSS-Ausrichtung verstehen

Bevor Sie sich mit Lösungen befassen, ist es wichtig, die vertikale Ausrichtung in CSS zu verstehen:

• Natürlich Ausrichtung: Inline-Elemente (wie span) werden auf natürliche Weise an der Grundlinie ausgerichtet, die der untere Rand des untersten Zeichens ist.
• Zeilenhöhe: Die Linie Die Eigenschaft -height legt die Höhe eines Zeilenfelds fest, das 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 Leerzeichen einnimmt Styling oder Polsterung.

Vertikale Ausrichtungstechniken

Um eine Spanne vertikal innerhalb eines Divs zu zentrieren, ziehen Sie die folgenden Techniken in Betracht:

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

Stellen Sie die Zeilenhöhe des Bereichs 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 Spanne. Dadurch verschiebt sich die Spannweite vertikal um die Hälfte ihrer Eigenhöhe.

4. Flexbox

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

Codebeispiel

Hier ist ein Beispiel für die Verwendung der Zeilenhöhenmethode:

<div id="theMainDiv" style="height: 15px; line-height: 15px;">
  <span id="tag1_outer">as</span>
</div>

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Span innerhalb eines Div in CSS vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!