在 html 中创建一个带有居中文本的椭圆

Question

我有一些椭圆需要放入 WordPress 页面，看起来像这样；

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

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

我在使用 padding-top 时设置了严格的值，但是对于 1 行 headers 这将不再居中。

我怎样才能更好地解决这个问题？

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

您可以删除 div 的高度并使用 top/bottom 填充使文本垂直居中：

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 2

您可以使用下面的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 3

看到fiddle，我在HTML里又加了两个椭圆，内容不一样，三个都继承了相同的class还是垂直居中对齐，三个都完美.这是相同的 fiddle 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;
}

在 html 中创建一个带有居中文本的椭圆

Creating an oval in html with centered text

html

css

wordpress

css-shapes