Позиция div на краях div, вертикально центрированная

Question

Я пытаюсь добиться следующего взгляда на веб-сайте, над которым я работаю. Обратите внимание, как кнопки + и X расположены по вертикали по краям изображения в центре страницы. Я могу добиться этого эффекта, используя некоторый JavaScript, чтобы перемещаться по divs, содержащим кнопки. Однако это решение не работает в 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>