Создание оваля в html с центрированным текстом

Question

У меня есть несколько овалов, которые нужно разместить на странице WordPress, чтобы это выглядело;

oval - paragraph 
paragraph - oval 
oval - paragraph 
paragraph - oval 
oval - paragraph 

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

Я поставил твердые значения в использовании padding-top, однако для 1 линейных заголовков это больше не будет центрировано.

Как я могу подойти к этому лучше?

div { 
 
    background-color: #1468a8; 
 
    width: 300px; 
 
    height: 150px; 
 
    margin: 100px auto 0px; 
 
    border-radius: 50%; 
 
    color: white; 
 
    font-size: 1.6em; 
 
} 
 
p { 
 
    text-align: center; 
 
    padding-top: 14%; 
 
}

<div> 
 
    <p>Accepting Divergence; 
 
    <br/>Affirming Values 
 
    </p> 
 
</div>

https://jsfiddle.net/gcampton/QGtzW/1025/

Answer 1

Вы можете использовать следующие CSS, чтобы сделать Div и текстовый центр. Используйте display: table; и table-cell решит вашу проблему.

div { 
    background-color: #1468a8; 
    border-radius: 50%; 
    color: white; 
    display: table; 
    font-size: 1.6em; 
    height: 150px; 
    margin: 0 auto; 
    width: 300px; 
} 
p { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Проверить Fiddle.

Answer 2

Вы можете удалить высоту div и использовать верхний/нижний отступы для центрирования текста verticaly:

demo

div { 
 
    background-color: #1468a8; 
 
    width: 300px; 
 
    margin: 5px auto; 
 
    border-radius: 50%; 
 
    color: white; 
 
    font-size: 1.6em; 
 
} 
 
p { 
 
    text-align: center; 
 
    margin:0; 
 
    padding: 14% 0; 
 
}

<div> 
 
    <p>Accepting Divergence; 
 
    <br />Affirming Values</p> 
 
</div> 
 
<div> 
 
    <p>Accepting Divergence;</p> 
 
</div>

Примечание: Вы также забыли закрывающий тег для элемента <p>

Answer 3

Смотрите скрипку, я добавил еще два овала в HTML, который содержит различное содержание, все три наследуется же класса еще по вертикали и среднего выравнивания идеально подходит для всех трех. здесь скрипку за тот же https://jsfiddle.net/nileshmahaja/rv7mnw7s/

Ниже мой код

HTML-

<div> 
    <p>Accepting Divergence; Affirming Values</p> 
</div> 

<div> 
    <p>Accepting Divergence; Affirming Values & lorem ipsum 
    </p> 
</div> 

<div> 
    <p>Accepting Divergence</p> 
</div> 

CSS-

div { 
    background-color: #1468a8; 
    width: 300px; 
    height: 150px; 
    margin: 100px auto 0px; 
    border-radius: 50%; 
    color: white; 
    font-size: 18px; 
    display:table-cell; 
    vertical-align:middle; 
} 

p { 
    text-align: center; 
}