4

这段代码有效地将 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>

在此处输入图像描述

我看过这些问题：

不幸的是，没有一个对我有用。

如何将这些真正集中在屏幕上？

4

1 回答 1

12

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

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

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

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

于 2013-06-15T13:15:49.023 回答