Question

我试图在div中垂直对齐div（为视频制作播放按钮），我尝试了所有垂直对齐的传统方法，甚至尝试了一个jquery脚本来垂直对齐它，但到目前为止我还是无济于事。

编辑 - 内容/圆圈播放按钮需要完全响应，因此我无法移除20％的宽度和20％的填充底部。

该网站的实时版本可在此处找到 - http://www.mosesmartin.co.uk/digitalguys/gkn.php 有问题的div是＆＃39; videoplay＆＃39;格

HTML

<div class="rectanglewrap">
    <div class="rectangleimg" id="gknengine">
        <div class="videoplay vcenter"><span class="glyphicon glyphicon-play" id="playbutton"></span></div>
    </div>              
</div>

CSS

.rectangleimg{
  position:relative;
  height:0;
  width:100%;
  padding-bottom:50%;
}
.div-centerer {
  position: absolute;
  top: 0;
  width:100%;
  height:100%;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
}

.videoplay {
  border-radius: 100%;
  background-color: #12A537;
  height:0;
  width:20%;
  padding-bottom:20%;
  margin:0 auto;
}

请帮助我，这对我来说是痛苦的！

三江源

Answer 1

因为你标记了jQuery这个问题，所以这里是如何在jQuery中做到的：

$('#playbutton').css('top', ($('#gknengine .videoplay').outerHeight() / 2) - ($('#playbutton').height() / 2));

您可能希望将其放在$(window).resize()处理程序中。

Answer 2

尝试使用相对和绝对定位，您可以使用百分比来适应移动设备：

.rectanglewrap {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    height: 200px;
    position: relative;
}
.videoplay {
    position: absolute;
    top:50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -10%;
    width: 20%;
    background: #ddd;
}

顶级＆amp;左边距应为宽度的一半。播放元素的高度（＆amp;它们可以是百分比）。

请参阅小提琴：http://jsfiddle.net/7fs52w2L/2/

Answer 3

如果您不关心older browser（例如IE＆lt; 9），您可以使用transform将您的div仅用CSS居中

div.videoplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  // margin-top: 1px <--- delete
}

#playbutton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  // top: 1px <--- delete
}

垂直对齐div中具有百分比高度和宽度的div

3 个答案: