Question

这段代码有效地将iframe集中在一起，但是在左边缘而不是它们的中心。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Videos</title>
    <style>
        div.center {
            width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body style="background: lightblue">
    <div class="center">
        <iframe src="http://www.youtube.com/embed/dgZ-K87NcwQ"></iframe>
        <p />
        <iframe src="http://www.dailymotion.com/embed/video/xoy7jd"></iframe>
    </div>
</body>
</html>

enter image description here

我见过这些问题：

不幸的是没有人对我有用。

如何将真正置于屏幕中心？

Answer 1

问题是你的iframe宽度超过200px（你为其居中的包含div定义的固定宽度）。这将导致它们的多余宽度溢出div的右边界。

根据您网站的完整结构，尝试将自动边距直接放在iframe上。

div.center iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

演示：http://jsfiddle.net/NvfKu/

水平居中iframe

1 个答案: