Text vertikal ausrichten in CSS

1. Verwenden Sie die Eigenschaft line-height, um Text in CSS vertikal auszurichten
2. Verwenden Sie span innerhalb eines div zusammen mit der line-height-Eigenschaft, um Text in CSS vertikal auszurichten
3. Verwenden Sie flexbox, um Text in CSS vertikal auszurichten

Wir werden drei Methoden zum vertikalen Ausrichten eines Textes in CSS vorstellen.

Verwenden Sie die Eigenschaft line-height, um Text in CSS vertikal auszurichten

Wenn wir einzeiligen Text haben, können wir die Eigenschaft line-height verwenden, um den Text innerhalb eines div vertikal auszurichten. Die CSS-Eigenschaft line-height legt die Höhe eines Zeilenrahmens fest. Es wird verwendet, um den Abstand zwischen den Textzeilen einzustellen. Wir können es jedoch auch verwenden, um unseren einzeiligen Text vertikal auszurichten. Diese Technik funktioniert nicht, wenn der Text Zeilenumbrüche hat oder aus mehr als einer Zeile besteht. Wir können line-height einen beliebigen Wert entsprechend unserer Anforderung angeben, wo wir den Text vertikal ausrichten möchten.

Erstellen Sie beispielsweise ein div und schreiben Sie darin einen einzeiligen Text. Geben wir dem div den Klassennamen center. Schreiben Sie einen einzeiligen Text vertikal ausgerichtet in das div. Geben Sie dem div eine height von 100px und line-height von 100px, um den Text vertikal auf die Mitte des Divs auszurichten. Schließlich geben Sie dem div einen border von 1px solid black, um die vertikale Ausrichtung zu sehen.

Das folgende Beispiel zeigt, dass der Text mit der CSS-Eigenschaft line-height vertikal zur Mitte des div ausgerichtet ist, die height von 100 px und border von 1px solid black enthält.

Beispielcode:

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

Verwenden Sie span innerhalb eines div zusammen mit der line-height-Eigenschaft, um Text in CSS vertikal auszurichten

Mit der Eigenschaft line-height können wir auch mehrere Zeilen vertikal ausrichten. Wir können ein span-Tag in ein div-Tag einfügen und mehrere Zeilen in das span-Tag einfügen. Wir können das br-Tag verwenden, um die Zeile zu unterbrechen und einen mehrzeiligen Text daraus zu machen. Dann können wir die Eigenschaft line-height sowohl für div als auch für span verwenden. Wir werden auch die CSS-Eigenschaft display: inline-block für das span-Tag verwenden, um mehrere Codezeilen zusammenzufassen. Daher müssen wir auch die CSS-Eigenschaft line-height innerhalb von span verwenden, um mehrzeiligen Text voneinander zu trennen.

Erstellen Sie beispielsweise ein div und dann ein span innerhalb des div. Schreiben Sie mehrere Textzeilen innerhalb dieses span mit Hilfe des br-Tags. Wählen Sie in CSS das div aus und geben Sie die height von 100px an und setzen Sie line-height auf 100px. Setzen Sie den div-Rahmen von 1px solid black, um die Ausrichtung zu sehen. Setzen Sie die Eigenschaft display des Tags span auf inline-block, um mehrere Textzeilen zusammenzufassen. Geben Sie line-height auf 20px für span, um eine Lücke zwischen mehreren Textzeilen zu erzeugen. Halten Sie vertikal-align auf middle, um den Text vertikal genau in der Mitte zu platzieren.

Das folgende Beispiel zeigt die vertikale Ausrichtung mehrerer Textzeilen innerhalb eines div mit Hilfe der Eigenschaft line-height und display: inline-block.

Beispielcode:

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

Verwenden Sie flexbox, um Text in CSS vertikal auszurichten

Wir können flexbox auch verwenden, um einen Text innerhalb eines div vertikal oder horizontal auszurichten. Wir können flexbox verwenden, indem wir die Eigenschaft display auf flex setzen. Nachdem wir die Eigenschaft display auf flex gesetzt haben, können wir die Eigenschaft align-items verwenden und ihren Wert auf center setzen, um einen Text innerhalb eines div vertikal auszurichten. Wir können die Eigenschaft justify-content verwenden und auf center setzen, um den Text innerhalb eines div horizontal zu zentrieren. Flexboxen sind sehr einfach zu verwenden und sie sind auch sehr effektiv.

Erstellen Sie beispielsweise ein div und schreiben Sie einzelne oder mehrere Textzeilen hinein. Verwenden Sie das Tag br, um mehrere Textzeilen zu erstellen. Geben Sie dem div eine Höhe von 100px. Stellen Sie den Rahmen als 1px solid black ein, um die Ausrichtung zu sehen. Setzen Sie den Wert der Eigenschaft display auf flex, um flexbox zu verwenden. Stellen Sie dann align-items auf center, um den Text innerhalb des div vertikal zur Mitte auszurichten. Wir können den Text auch horizontal ausrichten, indem wir den Wert von justify-content auf center setzen.

So können wir mit flexbox den Text in CSS horizontal und vertikal ausrichten.

Beispielcode:

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}