CODEWITHSUNDEEP
jqueryhtmlcssiframe
Granvic
Granvic

Reputation: 47

How to align an iframe horizontally (in the centre of the screen) with CSS?

I'm embedding a YouTube video inside an iframe, which I put inside a div. The problem I'm dealing with right now is that I can horizontally align (in the centre) the text but not the iframe.

This is the code I used to make this:

HTML

<div id="box-logo">
    <img src="Content/Media/red_package.png" />
    <span>Quem somos?</span>

    <iframe src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1"
            frameborder="0"
            allowfullscreen></iframe>
</div>


CSS

#box-logo {
margin-top: 40px;
text-align: center;
}

#box-logo img {
    background-color: red;
    border: 5px solid red;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

#box-logo span {
    color: red;
    font-family: Calibri;
    font-size: 24px;
}

#box-logo iframe {
    display: block;
    width: 895px;
    height: 435px;
}

I've been searching for multiple tips and I could't find one which could solve my problem.
I'd gladly hear your suggestions in order to try them out!

Thanks in advance,
Granvic

Upvotes: 0

Views: 2690

Answers (4)

mlegg
mlegg

Reputation: 832

You can also make the iframe responsive by using this code

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe width="420" height="315" src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

Upvotes: 1

Bugaloo
Bugaloo

Reputation: 1691

you just have to update your css with

iframe {display:inline-block;}
span {display:block;}

https://jsfiddle.net/wpnjk2rf/

Upvotes: 0

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4451

You must set the margin of your #box-logo iframe to 0 auto.

This is because you have the element with the display property set to block, so it takes the entire line. As you set the width to determinate amount of px there is some free space in the line. Setting margin: 0 auto you are indicating that free space must divide equally to each side of the div.

In the case you have the iframe display property set to inline or inline-block this wouldn't work. To get the div centered, in that situation, you should apply text-align: center to #box-logo

Here you have a fiddle: https://jsfiddle.net/g2s384L2/

Upvotes: 3

Albin Mathew
Albin Mathew

Reputation: 604

you can set like this

<iframe src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" frameborder="0" allowfullscreen="" style="width: 600px;height: 300px;
display: inline-block;"></iframe>

Upvotes: -1

Related Questions