Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Why is my iframe not centered?

I have tried using margin: 0 auto to center the div containing the iframe, but it keeps it floated left. Also the margin on the top does not seem to be working when in mobile view. Where am I going wrong? My link to my site

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points

You centered the parent container .showreel-container but it is wider then the iframe, the iframe has been set to 80% of the width and absolute positioning left: 0, so it will float to the left of it's parent.

/* Your styles for the parent container */
.showreel-container {
    margin: 0px auto !important;
    top: 150px;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0px;
}

/* Your styles for the iframe */
.showreel-container iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80%;
    height: 80%;
}

/* Change the iframe styles to this and it should center itself */

.showreel-container iframe {
    position: relative;
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

Or this will also work:

.showreel-container {
    margin: 0px auto !important;
    top: 150px;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0px;
    text-align: center;
}

.showreel-container iframe {
    width: 80%;
    height: 80%;
    display: inline-block;
}

height 80% is not going to work in this situation though on the iframe.

If it has to be height 80% you could do the following:

.showreel-container {
    margin: 0px auto !important;
    top: 150px;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0px;
}

.showreel-container iframe {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 80%;
}
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Thank you for the help.

I was being silly I was meant to make the container div 80%, but this works really well for what I want to achieve.

Many Thanks