Javascript 将div放置在div的边缘上，垂直居中

我正在努力在我正在开发的网站上实现以下外观。请注意

+

和

X

按钮是如何在页面中心的图像边缘垂直对齐的。我能够通过使用一些JavaScript在包含按钮的div中移动来实现这种效果。但是，该解决方案在Firefox或IE中不起作用。仅在Chrome和Safari（webkit）中起作用

HTML

CSS

---

任何人都可以帮助这些按钮在所有现代浏览器中正确对齐吗？

这完全可以通过CSS/HTML实现。不过，您需要知道图像容器的高度和按钮的大小才能使其完美（在本例中，这不应该是一个问题）

下面是一个例子：

我将按钮放在包装器内，并将包装器设置为

位置：relative。然后，将按钮设置为
位置：绝对
，并根据按钮所在的一侧和按钮的大小分别修改
顶部
、
左侧
、
右侧
、和
页边距顶部

此示例也是响应性的。
如果您包装图像和“按钮”元素；在单亲div中，
按钮元素
可以定位并转换到位

请注意，无论图像大小如何，此操作都有效



正文{
利润率：25px；
/*只是为了间隔*/
}
.img包装{
显示：内联块；
位置：相对位置；
}
.img包裹img{
显示：块
}
向上的
.下来{
宽度：50px；
高度：50px；
边界半径：50%；
边框：2件纯蓝；
背景：白色；
线高：50px；
位置：绝对位置；
最高：50%；
文本对齐：居中；
}
.起来{
左：0；
转换：转换（-50%，-50%）
}
.下来{
右：0；
转换：翻译（50%，-50%）
}

向上的
向下
您可以设置JSFIDLE吗？只需确保添加浏览器前缀以覆盖您的基础：
-webkit transform:translate（50%，50%）等。
<div id="contest_image">
    <img id="single_image" src="/img/ajax-loader.gif"/>

    <div class="large_vote_no downvoteclick">
        <label for="large_no"><img src="/img/sprite_imgs/contest/vote_no.png" class="down_vote"/></label>
        <button id="large_no"></button>
    </div> 
    <div class="large_vote_yes upvoteclick">
        <label for="large_yes"><img src="/img/sprite_imgs/contest/vote_yes.png" class="down_vote"/></label>
        <button id="large_yes"></button>
    </div>

    <div id="share">
        <label class="grey">Share</label>
        <ul class="social_icons">
            <li><a href="" class="twit"></a></li>
            <li><a class="fb"></a></li>
            <li><a href="#/" class="email"></a></li>
        </ul>
    </div>
</div>

function position_vote_buttons() {
    $(".large_vote_yes").css("visibility","visible");
    $(".large_vote_no").css("visibility","visible");
    $("#single_image").css("border","2px solid #0097fa");    

    var position = $("#single_image").position();
    var width = $("#single_image").width();
    var height = $("#single_image").height();
    $(".large_vote_no").animate({
        left: position.left-80,
        top: position.top +(height / 2) - 70
    },0);
    $(".large_vote_yes").animate({
        left: position.left+width-77,
        top: position.top +(height / 2) - 70
    },0);
}

.large_vote_yes, .large_vote_no {
    width:70px;  
    display:inline;
    position:absolute;
    top:0px;
    left:0px;
    vertical-align:middle;
    z-index:9999;
    visibility:hidden;
}
#large_yes, #large_no {
    border:none;
}
div#contest_image {
    clear:both;
    display:block;
    margin:0 auto 5px;
    width:800px;
    max-height:600px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align:center;
}
div#contest_image #single_image  {
    display:inline;
    vertical-align:middle;
    max-width:600px;
    max-height:600px;   
    position:relative;
    border:2px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;  
}
div#contest_image .up_vote, div#contest_image .down_vote {
    width:70px;
    height:70px;
    display:inline;
}