Question

我有一个带有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的相对位置造成的。但不确定。请帮帮我！

fiddle

Answer 1

您的h1标记包含文本，FF将文本高度添加到标题中。尝试删除文本，请参阅[此处] [http://jsfiddle.net/G3av6/3/]

Answer 2

如果您使h1绝对定位，然后从p中移除相对定位，那么它似乎正常工作。同时给出h1 100％宽度以使文本再次居中。

#id1 {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 125px;
  background: #000;
  color: #f00;
}
#id1 h1 {
  position: absolute;
  margin: 0;
  padding: 0;
  text-align: center;
  top: -50px;
  width: 100%;
}
#id1 p {
  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;
}

http://jsfiddle.net/G3av6/6/

显示：Firefox中的表格单元格问题

2 个答案: