我有一个带有 H1 的 div 和一个段落。挑战在于将段落垂直居中。
<div id="id1">
<h1>Header</h1>
<p>paragraph</p>
</div>
我使用:
#id1
{
position: relative;
width: 250px;
height: 250px;
border-radius: 125px;
background: #000;
color: #f00;
}
#id1 h1
{
position: relative;
margin: 0;
padding: 0;
text-align: center;
top: -50px;
}
#id1 p
{
position: relative;
display: table-cell;
vertical-align: middle;
top: -37px;
margin: 0;
padding: 0;
text-align: center;
height: 250px;
width: 250px;
border-radius: 125px;
background: #fff;
color: #000;
}
它适用于大多数新浏览器(甚至 IE8)，但不适用于 FF。 我想问题是由于 H1 和 P 的相对位置。但不确定。 请帮助我!
最佳答案
您的 h1 标签包含文本，FF 将文本高度添加到标题。尝试删除文本，请参阅[此处][http://jsfiddle.net/G3av6/3/]
关于html - 显示 : table-cell issue in Firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20339371/