Css 将div置于内容上方的div中居中（轻松向上投票）

我做了以下几把小提琴：

---

查看右箭头如何向下推动图像。我希望右箭头在大div中居中，而不考虑其内部图像的大小。我不能使用绝对定位，但我希望箭头相对于div居中（从div开始向下约300px），而不管里面是什么图像。

一个快速而肮脏的解决方案是将按钮（.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;
}

---

在文章中包含问题代码，而不仅仅是一个jsfiddle URL（），这句话很肯定地说“（easy UpVoces）”阻止了任何人阅读此文章。根据浏览器的不同，其中一部分可能会中断，这就是您的span.slider-right。内联元素（跨距）不能包含块级元素（div）。您应该将跨距更改为div。这不起作用。当跨距变为div时，箭头也会被弄乱。这对我很有用。。。看到我在我的原始帖子中添加的css，以及我所指的css。它不起作用，但你得到了投票，因为它仍然对我有效。。。更好的是，将跨度转换为div：