css - 在 div 中将 div 居中于内容之上（简单的点赞）

Question

我做了以下小提琴：

http://jsfiddle.net/hxQE4/

查看右箭头如何将图像向下推。我希望右箭头以大 div 为中心，无论其中图像的大小如何。我不能使用绝对定位，但我希望箭头相对于 div 居中（从 div 开始向下大约 300px），无论里面有什么图像。

Answer 1

一种快速而肮脏的解决方案是将按钮 (.slider-right) 的包含跨度设置为 100% 的高度，然后应用“位置：相对；顶部：50%；” 到按钮（.slider-right .circle）。这会将按钮的顶部放在中间标记处，因此您可能需要将其稍微调整为 48% 或任何看起来最好的值。

如果您走那条路线，您还需要从包含跨度中删除上边距，否则按钮将被下拉该数量。

我还注意到您在跨度内有 div。您应该避免将块级元素（如 div）放置在内联级元素（如 span）中。它可能会按原样验证失败。


更新 的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;
}