我想要做的就是获取标签并将其与页面垂直对齐。我不知道是否必须将标签放入另一个标签中才能工作。任何帮助将不胜感激。提前致谢!
代码
<!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)
干得好。
诀窍是使用嵌套元素的边距和顶部偏移属性。
在这种情况下,假设父 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 包装器的人之一......