div的邊緣上的位置div，垂直居中

Question

我正試圖在我正在處理的網站上實現以下外觀。請注意，+和X按鈕在頁面中心的圖像邊緣垂直對齊。我能夠使用一些JavaScript來移動包含按鈕的div，從而達到這種效果。但是，此解決方案在Firefox或IE中不起作用。僅限於Chrome和Safari（webkit）。

HTML

<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> 

的Javascript

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); 
} 

CSS

.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; 
} 

誰能幫助讓這些按鈕上正確對齊所有的現代瀏覽器？

Answer 1

這絕對可以用CSS/HTML。你需要知道你的圖像容器的高度和你的按鈕的大小，以獲得完美的，但（這在這種情況下不應該是一個問題）。

下面是一個例子：http://jsfiddle.net/gxr4r2n0/1/

我放置的按鈕包裝內部，所述包裝設置爲position:relative;。然後，將按鈕設置爲position:absolute，並根據按鈕位於哪側以及按鈕的大小分別修改top，left，right和margin-top。

這個例子也是響應式的。

Answer 2

如果您包裝圖像和'按鈕元素;在一個單獨的父div中，button elements可以定位並轉換到位。

請注意，無論圖像大小如何，此功能都可以使用。

JSfiddle Demo

body { 
 
    margin: 25px; 
 
    /* just for spacing */ 
 
} 
 
.img-wrap { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.img-wrap img { 
 
    display: block 
 
} 
 
.up, 
 
.down { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    border: 2px solid blue; 
 
    background: white; 
 
    line-height: 50px; 
 
    position: absolute; 
 
    top: 50%; 
 
    text-align: center; 
 
} 
 
.up { 
 
    left: 0; 
 
    transform: translate(-50%, -50%) 
 
} 
 
.down { 
 
    right: 0; 
 
    transform: translate(50%, -50%) 
 
}

<div class="img-wrap"> 
 
    <img src="http://lorempixel.com/output/city-h-c-200-300-3.jpg" /> 
 
    <div class="up">Up</div> 
 
    <div class="down">down</div> 
 
</div>