CODEWITHSUNDEEP
htmlcsscentering
aybe
aybe

Reputation: 16682

Center an iframe horizontally

This piece of code effectively centers the iframes but on their left edge not their center.

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

I've seen these questions :

Unfortunately none worked for me.

How would one really center these on the screen ?

Upvotes: 4

Views: 26045

Answers (1)

Matt Rohland
Matt Rohland

Reputation: 706

The issue is that your iframes are wider than 200px (the fixed width you've defined for their centered containing div). This will cause their excess width to spill over the right boundry of the div.

Depending on the full structure of your site try putting the auto margin directly on the iframes.

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

Demo: http://jsfiddle.net/NvfKu/

Upvotes: 12

Related Questions