使用居中文本在html中创建椭圆形

我需要在WordPress页面中放入许多椭圆形，使其看起来像

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

我没有问题创建椭圆形，但我需要样式，所以无论我在每个椭圆形中输入什么标题文本，它都保持一致

我在使用padding top时使用了硬值，但是对于1行标题，这将不再居中

我怎样才能更好地处理这个问题

div{
背景色：#1468a8；
宽度：300px；
高度：150像素；
利润率：100px自动0px；
边界半径：50%；
颜色：白色；
字号：1.6em；
}
p{
文本对齐：居中；
垫顶：14%；
}

接受分歧；

确认价值

您可以删除

div的高度，并使用顶部/底部填充将文本垂直居中：



div{
背景色：#1468a8；
宽度：300px；
保证金：5px自动；
边界半径：50%；
颜色：白色；
字号：1.6em；
}
p{
文本对齐：居中；
保证金：0；
填充：14%0；
}

接受分歧；

确认价值

接受分歧

您可以使用以下css创建div和文本中心。使用
显示：表格
和
表格单元格
将解决您的问题

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;
}

检查
看小提琴，我在HTML中又添加了两个椭圆形，其中包含不同的内容，所有三个继承相同的类仍然是垂直的，中间对齐对于所有三个都是完美的。这是同样的小提琴

下面是我的代码

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>

你说的“保持一致”是什么意思？我的意思是一旦你把文本改成三行，它就不再居中了。table属性工作得最好，因为它不需要任何硬值。
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;
}