div의 가장자리에 위치 div, 수직 가운데에 위치

Question

나는 작업하고있는 웹 사이트에서 다음과 같은 모양을 얻으려고합니다. + 및 X 단추가 페이지 가운데의 이미지 가장자리에 수직으로 정렬되어 있는지 확인하십시오. 일부 JavaScript를 사용하여 버튼이 포함 된 div 주위를 이동하면서이 효과를 얻을 수 있습니다. 그러나이 솔루션은 Firefox 또는 IE에서 작동하지 않습니다. Chrome 및 Safari (웹킷)에서만 가능합니다.

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> 

자바 스크립트

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/는 I 랩퍼 내부 버튼을 배치하고 position:relative; 랩퍼 세트. 그런 다음 버튼을 position:absolute으로 설정하고 버튼이 어느면에 있는지와 버튼 크기에 따라 top, left, right 및 margin-top을 수정합니다.

이 예도 반응적입니다.

Answer 2

이미지를 감싸는 경우 'button elements; 단일 부모 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>