Как вертикально позиционировать текст в центре круга div?

Я пытаюсь сделать круг в форме div с некоторым текстом прямо посередине. Я могу получить его горизонтально посередине, легко, но у меня возникают проблемы с получением его в вертикальном центре, я пытался делать вертикальное выравнивание, заполнение, отображение и т. Д., Но он всегда будет оставаться на вершине.Как вертикально позиционировать текст в центре круга div?

Вот виновный HTML:

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

И вот CSS для этого DIV:

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

Я пытаюсь получить текст именно в середине круга по вертикали. Как я могу это сделать?

источник

2016-08-08 HJGBAUM

Вам необходимо добавить line-height. Сделайте line-height равным высоте круга, в данном случае 150px.

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>

Если вы открыты к использованию Flex-ящик, который вы также можете сделать это вместо этого. Это будет работать для нескольких строк.

.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>

источник

2016-08-08 15:24:30 Wowsk

Это создаст проблемы, если текст несколько строк. Я считаю, что использование 'display: table-cell' было бы более практичным решением, но для каждого из них. – Santi

Я обновил свой ответ, включив два способа: один для одной строки, а другой для нескольких строк. – Wowsk

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

Затем сделайте свой круг дисплей: стол;

.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>

источник

2016-08-08 15:25:26

Взгляните на это:

.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>

источник

2016-08-08 15:25:55

Сделайте круг display: table; и внутри p имеют display: table-cell; и 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>

источник

2016-08-08 15:27:07 Santi

Как вертикально позиционировать текст в центре круга div?

ответ

Смежные вопросы