Question

我需要在较大的div内的图像两侧居中前后箭头。 div的宽度和高度根据图像的大小而变化。

到目前为止，我的作品现场直播版本为http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html

这里有一个jsfiddle：http://jsfiddle.net/thwackukulele/4zHyd/ 虽然我不知道没有链接图像会有多少用途。

您会看到前后箭头位于图像两侧的蓝色区域的顶部。我希望它们在这个蓝色区域内水平和垂直居中。

我知道我使用了很多定位，如果有更好的方法来攻击这种布局，请告诉我。这是我能想到的最好的。我最终将这些布局交给了正在添加数据库CMS功能的开发人员。所以我的代码不需要是完美的，它只需要说明我的意图，以便他能理解。

感谢您提前提供任何帮助!!

Answer 1

我不确定我是否理解这个问题，那就是很多代码可以通读，也许只能在焦点区域发布代码。

尝试：

.wrapper{
       position:relative;
    }
    .left_arrow{
       position:absolute;
       left:0;
       top:50%;
    }
    .right_arrow{
       position:absolute;
       right:0;
       top:50%;
    }

Answer 2

.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}

Answer 3

解决方案是将链接绝对定位在div的50％顶部和margin-top处于链接高度的负半部分，这样：

http://jsfiddle.net/elclanrs/JKqnm/

HTML：

<div>
    <img />
    <a id="next"></a>
    <a id="prev"></a>
</div>

的CSS：

div {
    position: relative;
    height: 300px; /* Set size */
    width: 500px;
    background: blue;
}
#prev, #next {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    background: red;
}
#prev {
    left: -48px;
}
#next {
    right: -48px;
}

在不同宽度和高度的div内水平和垂直居中图像

3 个答案: