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 の幅が 200 ピクセル (中心にある div を含むように定義した固定幅) よりも広いことです。これにより、余分な幅が div の右側の境界を越えてはみ出します。

サイトの完全な構造に応じて、自動マージンを iframe に直接配置してみてください。

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

デモ: http://jsfiddle.net/NvfKu/

于 2013-06-15T13:15:49.023 に答える