HTML
<div class="circle">
<div class="content">
<span><h3>heading</h3><p>slogan goes here</p></span>
</div>
</div>
CSS
.circle {
position: relative;
width: 0;
height: 0;
padding: 20%;
margin: 1em auto;
border-radius: 50%;
background: #a7cd80;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
overflow: hidden;
}
.content span{
display: table-cell;
vertical-align: middle;
text-align: center;
}
h3{
line-height: 1px;
}
此代码仅在 Firefox 中有效,但在 Chrome 等中无效。文本在 Firefox 中显示为表格单元格,但在其他文本中则无效,即文本仅在 Firefox 中以圆形水平和垂直居中。
你可以直观地看到这一点
最佳答案
这是因为您将 .circle
的宽度和高度指定为 0,这意味着对象内部实际上没有空间,因此当您将跨度的宽度和高度指定为100%,实际宽度和高度将为0
如果你给你的圆圈一个实际的宽度和高度,而不是使用填充来制作形状,那么它应该可以工作
关于css - Chrome 中的显示表格和表格单元格错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18143669/