Question

我有一种情况，我需要垂直居中div内部的一些内容（特别是iFrame），其中父div将小于内容。到目前为止，我能找到的关于垂直居中的所有内容都是关于图像看似不同的方式。

这是简单的代码......

<div class="video">
  <iframe id="youtube-XXXX" src="..." style="width: 855px; height: 481px;"></iframe>
</div>

现在，iframe是生成的代码，但它确实有一个我可以引用的id值。父div需要高达330px（这是一个响应式设计，所以它可能会缩短）。所以在这种情况下，我正在寻找隐藏的iframe的顶部和底部75px（481px - 330px / 2）。

现在，我在div.video上有CSS样式，如下所示：

div.video {
  overflow: hidden;
  max-height: 330px;
}

现在，我得到了预期的高度，但iframe的顶部与div的顶部对齐。如何在中间渲染iframe。

Answer 1

你可以使用jQuery：Jquery函数是这样的：

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
return this;
}

并且通话可以是这样的：

$(element).center();

在您的情况下为您的div指定名称，如“dvVideo”，然后调用函数：

$("#dvVideo").center();

信用到：Using jQuery to center a DIV on the screen

垂直中心内容，未知高度，溢出隐藏

1 个答案: