2

我有一种情况，我需要在 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 在中间渲染。

4

1 回答 1

0

您可以为此目的使用 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();

归功于：使用 jQuery 在屏幕上居中显示一个 DIV

于 2013-08-15T00:30:04.323 回答