Question

我正在努力在我正在开发的网站上实现以下目标。请注意+和X按钮如何在页面中心的图像边缘垂直对齐。我能够使用一些JavaScript来移动包含按钮的div。但是，此解决方案在Firefox或IE中不起作用。仅限Chrome和Safari（webkit）。

Demo Image

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

如果你包装图像和＆＃39;按钮元素;在单个父div中，button elements可以定位并转换到位。

注意无论图像尺寸如何，这都有效。

JSfiddle Demo

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只有CSS / HTML才能实现这一点。您需要知道您的图像容器高度和按钮大小才能使其完美（在这种情况下，这不应该成为问题）。

以下是一个例子：http://jsfiddle.net/gxr4r2n0/1/

我将按钮放在包装器中，并将包装器设置为position:relative;。然后，将按钮设置为position:absolute，并根据按钮所在的一侧和大小分别修改top，left，right和margin-top按钮。

这个例子也很敏感。

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

2 个答案: