將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

如果包裝圖片和'button元素； 在單個父div中，可以定位button elements並將其轉換到適當位置。

請注意，無論圖像大小如何，此方法均有效。

JSfiddle演示

 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-hc-200-300-3.jpg" /> <div class="up">Up</div> <div class="down">down</div> </div> 

Answer 2

僅CSS / HTML絕對可以做到這一點。 但是，您需要知道圖像容器的高度和按鈕的大小才能使其完美（在這種情況下這不是問題）。

這是一個示例： http : //jsfiddle.net/gxr4r2n0/1/

我將按鈕放在包裝器內，並將包裝器設置為position:relative; 。 然后，將按鈕設置為position:absolute ，並根據按鈕位於哪一側和按鈕的大小分別修改top ， left ， right和margin-top 。

這個例子也很敏感。