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

您可以移除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>元素的结束标记

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

看到小提琴，我在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;
}

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

3 个答案: