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

概述我有一些椭圆形,我需要放入一个WordPress页面,所以它看起来像; oval - paragraphparagraph - ovaloval - paragraphparagraph - ovaloval - paragraph 我创建椭圆形没有问题,但是无论我在每个椭圆形中添加什么标题文字,我都需要设置它的样式 – 它保持均匀. 我已经在使用padding-top中设置了硬值,但是对 我有一些椭圆形,我需要放入一个wordpress页面,所以它看起来像;

oval - paragraphparagraph - ovaloval - paragraphparagraph - ovaloval - 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/

解决方法 您可以使用以下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.

总结

以上是内存溢出为你收集整理的使用居中文本在html中创建椭圆全部内容，希望文章能够帮你解决使用居中文本在html中创建椭圆所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。