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


Tags: jquery,html,css,iframe

Problem :

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



Solution :

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/


    CSS Howto..

    How to use nth-child() but not for child in CSS?

    How to add a style to