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 write special css for IE in external css file using css conditional comments [closed]

    How to display inline with rails?

    How to fix a element (have example) on the screen using jquery /css?

    How to correct Div overlapping?

    how to create css shapes X which has to be background inside? [closed]

    How do I change the colours of multiple buttons, each into different ones when hovered?

    How should I convert this object from .PSD to HTML/CSS?

    How to use the CSS pseudo element :before in multiple classes of same element

    How to select ids which contain special characters?

    How to make a condition in CSS with an HTML attribute?

    How to get a white outline around an image in CSS

    How to style input type file using css

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to remove the css class

    How to fix this mouse hover transform scale effect (animation provided)

    How do I vertically align my wrapper so it will be centered on a (mobile) screen?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    How to keep the link color on CSS buttons as one color when changing default link colors?

    How to add a css class programmatically to a piece of code?

    How to create an Hours of Operation list with HTML and CSS?

    How to make semi-transparent background [duplicate]

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How to force an empty page in a paged HTML document?

    how to zoom in an image and center it

    how to control the css rotation of an element inside a rotated element?

    How to mark up a tiled layout with CSS?

    How to get table-row css and border property work together?

    css how to make the button in the middle of this code [closed]

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

    How to add background-size in css based on image size?