0

我在 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垂直和水平居中。请注意,所有图像的宽度不能超过 600 像素和高于 450 像素(我有一个处理)。

两个 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%,则图像未垂直对齐...

你看到解决方案了吗?

4

3 回答 3

1

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

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

于 2013-06-26T13:29:24.223 回答
0

这适用于 Chrome 和 IE。问题是相对位置在 Firefox 上不起作用。

我认为这是因为 firefox 仍然遵循CSS 2.1 规范

"'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 的影响元素未定义。”

尽管这在 CSS 3 中发生了变化,但现在依赖它似乎还为时过早。

于 2013-06-26T13:31:20.783 回答
0

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

设置line-height等于height你的盒子和img作为vertical-align:middle;

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

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

下线

于 2013-06-26T13:29:57.717 回答