如何<

Question

我要做的就是拿下标签并使它与页面垂直对齐。我不知道是否必须将标签放在另一个标签中才能工作。任何帮助将不胜感激。预先感谢！

CODE

<!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>

Answer 1

你去。

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

技巧是使用嵌套元素的margin和top offset属性。

在这种情况下，给定父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%; }

因此，我建议将iframe包裹在div中。它给您更多的控制权。再说一次，我是那些过多的div包装器之一...

Answer 2

如果需要将iframe居中，则为其选择器提供一个宽度应该可以解决问题：

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

Answer 3

这是一种很差的方法，但是它与所有浏览器最兼容。其他方法也有问题。

将单元格的样式设置为vertical-align: middle; width: 800px; margin-right: auto; margin-left: auto;。
在样式表中添加
html，正文{高度：100％;}

再一次，这样做有点不好，因为您使用表格来组织视觉布局，但是它有好处

在浏览器上不需要HTML 5
几乎与所有回IE 5的浏览器兼容
不需要javascript

建议：请确保在主体样式中指定最小宽度和最小高度，以使iFrame始终可见。

Answer 4

这可能对您有用：

<table height="100%" width="100%"> <tr> <td valign="middle" align="center"> <iframe width="800" height="500"></iframe> </td> </tr> </table>

以及CSS
body{ height:100% }

Answer 5

使用flex。更直接。

/* Here just for context */
html,
body,
.container {
  width: 100%;
  height: 100%;
}

/* This is whats needed */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <iframe width="300" height="150" src="https://www.youtube.com/embed/V17ij5Ap1pA"></iframe>
</div>

如何<

问题描述投票：2回答：5

5个回答

最新问题

如何<

问题描述 投票：2回答：5

5个回答

最新问题

问题描述投票：2回答：5