在显示中使用相对位置：Firefox中的table-cell。包装解决方案防止垂直对齐：中间

Question

我在Chrome上使用此代码，即：

<div id="infobox_mainpic" class="DetailsMainPic" align="center" valign="middle">
   <img src="pictures/3a8ca06d8d51e76243f3d4efdc710d72.jpg" onerror="this.src='css/noload.png';">
   <div class="mainPicArrowLeftDetails" onclick="return NextPic(this,-1);"></div>
   <div class="mainPicArrowRightDetails" onclick="return NextPic(this,1);"></div>
</div>

主div（infobox_mainpic）的固定尺寸为600px * 450px。 我的目的是将img垂直和水平居中。请注意，所有图像不能宽于600px且高于450px（我有一个处理）。

这两个div“mainpic ...”应该是主要div的顶部绝对位置，如图所示

为实现这一目标，我使用了infobox_mainpic

display : table-cell;
vertical-align : middle;
text-align:center;
position : relative;

在箭头上，我使用

position : absolute;
top : 130px;

适用于Chrome和IE。 问题是位置相对不适用于Firefox。我试图将所有内容包装在div中并应用position : relative但是现在，箭头不是从主div的顶部开始，而是从图像的顶部开始。如果我为包装div设置宽度和高度为100％，那么图像不是垂直对齐的......

你看到了解决方案吗？

Answer 1

经过一些测试，我找到了解决方案。

而不是将div包装器放在infobox_mainpic中，我将infobox_mainpic放在一个具有相对位置的div中。这样，箭头被正确定位，img仍然在table-cell div中，因此它正确居中。

Answer 2

使用d isplay:inline-block代替table-cell。 relative定位不再是错误。

将line-height设为等于height的盒子，将img设为vertical-align:middle;

箭可以站在盒子外面。 inline-block以及vertical-align:middle;所以他们站在一边，在盒子的中间位置。此时，position:absolute不再是必需的。

demo http://codepen.io/gcyrillus/pen/iAlms

离线

Answer 3

  

适用于Chrome和IE。问题是位置相对不适用于Firefox。

我认为这是因为firefox仍在关注CSS 2.1 specs，

  

“'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-的影响 - 单元格和表格标题元素未定义。“

尽管CSS 3已经发生了变化，但似乎现在还要早点依赖它。