Разрыв строки заставляет вторую строку выходить за пределы круга [дубликат] ⇐ CSS

[Anonymous]

Код: Выделить всё

 .circle1{
height: 150px;
width: 150px;
background-color: #BC903F;
border-radius: 50%;
margin-right: 15px;
line-height: 150px;
}

.circle1:hover{
border: #8D1D22 solid 5px;
cursor: pointer;

}

.speech_bubble{
display: flex;
align-items: center;
box-sizing: border-box;
}
.speech_bubble>p{
font-size: 15px;
}
.in_circle{
height:150px;
width:150px;
font-size: 36px;
text-align: center;
.month{
color: #8D1D22;
}
.day{
color: aliceblue;
}
}
}

это CSS круга, в котором я хочу разместить текст. Это должен быть месяц вверху и день внизу.
html:

Код: Выделить всё

[b]Oct[/b]
[b]29[/b]

Я хочу спросить, как центрировать текст в круге примерно так:
введите здесь описание изображения, я могу поместить месяц и день рядом по центру внутри круг, но когда я добавляю разрыв строки между двумя элементами p, он отправляет его слишком далеко вниз, из-за чего текст дня выходит за пределы круга, я также пытался сделать их обоих , но возникает та же проблема
любое предложение приветствуется.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -of-circle