我在 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%,则图像未垂直对齐...
你看到解决方案了吗?