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

【问题标题】：Creating an oval in html with centered text在 html 中创建一个带有居中文本的椭圆
【发布时间】：2015-04-21 14:19:15
【问题描述】：

我需要将一些椭圆放入 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/

【问题讨论】：

“保持统一”是什么意思？
我的意思是，一旦您将文本更改为三行，它就不再居中。 table 属性效果最好，因为它不需要任何硬值。

标签： html css wordpress css-shapes

【解决方案1】：

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

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> 元素的结束标签

【讨论】：

【解决方案2】：

您可以使用以下 css 来制作 div 和 text center。使用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.

【讨论】：

【解决方案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;
}

【讨论】：