将div放在内容中的div（轻松upvotes）

Question

我做了以下小提琴：

http://jsfiddle.net/hxQE4/

查看右箭头如何向下推动图像。我希望右箭头在大div中居中，无论其内部的图像大小如何。我不能使用绝对定位，但我希望箭头相对于div居中（距div的起点大约300px），无论里面有什么图像。

Answer 1

一个快速而肮脏的解决方案是将按钮（.slider-right）的包含范围设置为100％的高度，然后应用“position：relative; top：50％;”按钮（.slider-right .circle）。这会使按钮的顶部位于中间位置，因此您可能需要稍微调整一下至48％或最佳效果。

如果你走了那条路线，你还需要从包含范围中删除上边距，否则该按钮将被按下该数量。

我也注意到你有跨越内部的div。您应该避免在内联级别元素（如span）中放置块级元素（如div）。它可能无法按原样验证。


更新 css：

.slider-right {
position: relative;
float: right;
height: 100%;
margin-top: 0px;
position: relative;
right: 6px;
width: 32px;
z-index: 30;
}

.circle{
position: relative;
top: 48%;
display:table;
line-height:30px;
width:10px;
height:10px;
padding:3px 5px 3px 7px;
border:2px solid #CFC5CD;
border-radius:21px;
background: #000000; /* Old browsers */
opacity: .99;
}