Wie kann man Text in der Mitte eines Kreises div vertikal positionieren?

Ich versuche ein kreisförmiges div mit etwas Text direkt in der Mitte zu machen. Ich kann es horizontal in der Mitte, leicht, aber ich habe große Mühe, es in der vertikalen Mitte zu bekommen, ich habe versucht, vertikale Ausrichtung, Polsterung, Display usw., aber es wird immer ganz oben bleiben.Wie kann man Text in der Mitte eines Kreises div vertikal positionieren?

Hier ist der säumige HTML:

<div class="widget"> 
    <p id='case'>{27 cases}</p> 
</div>

Und hier ist die CSS für das div:

.widget { 
    background-color: #ff1122; 
    color: yellow; 
    width: 150px; 
    height: 150px; 
    border-radius: 100%; 
    text-align: center; 
    font-size: 24px; 
    vertical-align: middle; 
}

Ich versuche vertikal den Text genau in der Mitte des Kreises zu bekommen. Wie kann ich das machen?

Quelle

2016-08-08 HJGBAUM

Sie müssen die line-height Eigenschaft hinzufügen. Machen Sie die line-height gleich der Höhe des Kreises, in diesem Fall .

line-height:150px;

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    vertical-align: middle; 
 
    line-height:150px; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

Wenn Sie mit Flex-Box geöffnet sind, können Sie stattdessen auch dies tun. Dies funktioniert für mehrere Zeilen.

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
}

<div class="widget"> 
 
    <p id='case'>This is multiple line text.</p> 
 
</div>

Quelle

2016-08-08 15:24:30 Wowsk

Dies wird Probleme schaffen, wenn der Text über mehrere Zeilen ist. Ich glaube, dass die Verwendung von 'display: table-cell' eine persönlichere Lösung wäre, aber für jede ihre eigene Lösung. – Santi

Ich aktualisierte meine Antwort, um zwei Möglichkeiten einzuschließen, eine für die Einzelleitung und die andere für mehrere Leitungen. – Wowsk

display: table-cell; 
vertical-align: middle;

Dann wird Ihr Kreis Anzeige machen: Tisch;

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    vertical-align: middle; 
 
    display:table; 
 
    line-height:150px; 
 
} 
 
p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

Quelle

2016-08-08 15:25:26

Werfen Sie einen Blick auf diese:

.widget { 
 
    background-color: #f12; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
} 
 

 
.widget * { 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.widget::before { 
 
    content: ""; 
 
    display:inline-block; 
 
    width: 0; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

Quelle

2016-08-08 15:25:55

Machen Sie den Kreis display: table; und das Innere p haben display: table-cell; und vertical-align: middle;.

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    display: table; 
 
} 
 

 
.widget p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

Quelle

2016-08-08 15:27:07 Santi

Wie kann man Text in der Mitte eines Kreises div vertikal positionieren?

Antwort

Verwandte Themen