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

【问题标题】：Use position relative inside display:table-cell in Firefox. Wrapper solution prevent vertical align : middle在 Firefox 中使用 display:table-cell 中的相对位置。包装解决方案防止垂直对齐：中间
【发布时间】：2013-06-26 21:43:58
【问题描述】：

我在 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%，则图像未垂直对齐...

你看到解决方案了吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

我没有将 div 包装器放在 infobox_mainpic 中，而是将 infobox_mainpic 放在具有相对位置的 div 中。这样，箭头正确定位，并且 img 仍然在表格单元格 div 内，因此它正确居中。

【讨论】：

【解决方案2】：

这适用于 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 中发生了变化，但现在依赖它似乎还为时过早。

【讨论】：

我知道，但这不是我的问题的目的。

【解决方案3】：

使用 display:inline-block 代替 table-cell。 relative 定位不再出错。

将line-height 设置为等于您的boxe 的height 并将img 设置为vertical-align:middle;

箭头可能站在盒子外面。 inline-block 和 vertical-align:middle; 也一样，所以他们站在一旁并位于盒子的中间。此时，position:absolute 不再需要了。

演示http://codepen.io/gcyrillus/pen/iAlms

离线

【讨论】：