如何垂直对齐 <iframe>?

use*_*400 5 html css

我想要做的就是获取标签并将其与页面垂直对齐。我不知道是否必须将标签放入另一个标签中才能工作。任何帮助将不胜感激。提前致谢!

代码

<!DOCTYPE html>
<html lang=en-US>
<head>
<title></title>
<style type="text/css">

iframe {
    margin: 0 auto;
    display: block;
    border: 1px solid #ccc;
}

</style>
</head>

<body>
<iframe width="800" height="500"">

</iframe>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

mui*_*iiu 6

干得好。

http://jsfiddle.net/UFMP7/1/

诀窍是使用嵌套元素的边距和顶部偏移属性。

在这种情况下,假设父 div (A) 为 300px,我将嵌套 div (B) 偏移了 300 的 50%,即 150。因此 B 位于距 A 容器顶部 150px 的位置。然而,我们还没有结束。为了让 B 的中心与 A 的中心匹配,我们需要将 B 高度的负 50% 应用于 margin-top 属性。这将它居中并进行数学检查。

如果您知道所有事物的尺寸(以像素为单位),那就更容易了。

随意更改 A 宽度或高度。它将动态居中。

div#a
{
    width: 300px;
    height: 300px;
    border-width:1px;
    border-style: solid;

    /* important stuff below */
    display: inline-block;  
}

div#b
{
    width: 60px;
    height: 60px;
    background-color: red;

    /* important stuff below */
    position: relative;
    margin: -30px auto 0 auto;
    top: 50%;  
}
Run Code Online (Sandbox Code Playgroud)

因此,我建议将您的 iframe 包装在一个 div 中。它给了你更多的控制权。再说一次,我是那些过度使用 div 包装器的人之一......