center an iframe with css?

[Starhorsepax]

Does anyone know how to do this? I had to use deprecated code to get it to center. I've tried div class center. But it's not working.

[angelwatt]

Generally you do it the same as with other elements: margin: 0 auto; If that's not working, show the HTML/CSS you're working with and we might be able to offer something more specific.

[elppa]

iframes display inline by default.

So if you are going with margin: auto; you will need to add display: block; as well.

Also for auto margins to work an explicit width must be set on the iframe.

This should work:

iframe {
    display: block;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    border: 0;
}

<iframe src="http://www.apple.com/"></iframe>

[Starhorsepax]

Originally Posted by elppa

iframes display inline by default.

So if you are going with margin: auto; you will need to add display: block; as well.

Also for auto margins to work an explicit width must be set on the iframe.

This should work:

iframe {
    display: block;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    border: 0;
}

<iframe src="http://www.apple.com/"></iframe>

THANK YOU! That worked!

[George Florida]

Originally Posted by elppa

iframes display inline by default.
So if you are going with margin: auto; you will need to add display: block; as well.
Also for auto margins to work an explicit width must be set on the iframe.
This should work:

iframe {
    display: block;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    border: 0;
}

<iframe src="http://www.apple.com/"></iframe>

Many thanks, Elppa, for the great AND COMPLETE WITH COMPLETE CODE reply that worked, instead of posting the incomplete, condescending and arrogant reply immediately prior to yours.

When we ask for advice, it's not to be told by implication, "Hey, dummy, you should know enough that generally you do it the same as with other elements: margin: 0 auto."

If we KNEW that much, we wouldn't be here asking for decent, complete and applicable information. No one is asking for implied insults. In the future, angelwatt, save yourself the time and bandwidth by not posting such useless and pedantic crap, and take a lesson from Elppa about how an information forum is supposed to work in sharing USEFUL information instead of trying to impress others with your useless prowess.

We don't care what you know; on specific questions and trouble-shooting, we care about what you know which you are willing to share in detail as a colleague.

(EOM)

[SrWebDeveloper]

Originally Posted by George Florida

......instead of posting the incomplete, condescending and arrogant reply immediately prior to yours. When we ask for advice, it's not to be told by implication, "Hey, dummy.....

You could have been more diplomatic than that - I don't agree with your phrasing, characterization or the need to attack publicly (i.e. maybe next time don't reply at all or repor to a mod) but I do understand your frustration at that point in the thread on the technical stuff, of course. As a long term user and with all due respect to you, I personally ask please try to keep it friendly here and I will do the same. Then it becomes contagious, and that's a forum folks will want to not just visit, but re-visit.

Thank you.

[dma550]

Originally Posted by George Florida

Many thanks, Elppa, for the great AND COMPLETE WITH COMPLETE CODE reply that worked, instead of posting the incomplete, condescending and arrogant reply immediately prior to yours.

When we ask for advice, it's not to be told by implication, "Hey, dummy, you should know enough that generally you do it the same as with other elements: margin: 0 auto."

If we KNEW that much, we wouldn't be here asking for decent, complete and applicable information. No one is asking for implied insults. In the future, angelwatt, save yourself the time and bandwidth by not posting such useless and pedantic crap, and take a lesson from Elppa about how an information forum is supposed to work in sharing USEFUL information instead of trying to impress others with your useless prowess.

We don't care what you know; on specific questions and trouble-shooting, we care about what you know which you are willing to share in detail as a colleague.

(EOM)

Hmm, I didn't think his post was arrogant. I sometimes don't post entire solutions on code forums just to have the OP get involved in the solution, and, let's face it, not everyone has time to solve someone else's problem in complete fashion, but provide a bump in the right direction.

[fig]

Originally Posted by dma550

Hmm, I didn't think his post was arrogant. I sometimes don't post entire solutions on code forums just to have the OP get involved in the solution, and, let's face it, not everyone has time to solve someone else's problem in complete fashion, but provide a bump in the right direction.

Completely agree. He offered the basic code that should work and said if it didn't to post the code so we could troubleshoot it. Sounds pretty reasonable to me.

I also sort of wonder what caused our new friend George to use his first and so far only post to angrily comment on an 18 month old thread.

[SrWebDeveloper]

I think newbies often don't notice dates, they're browsing many forums to get the answer to a common issue and usually copy/paste/try many solutions until one works. I do not at all condone what that guy did, nor did anyone who posted code or advice in any way do anything wrong, to be clear. I'm just stating I understand the frustration, I've been there and done that when I was first learning (and I still am learning, all the time). People often lose patience in this fast pace world of get it done, fix it now, get paid, etc. combined with little effort at learning. The Internet is a great resource, but people forget to be civil and that technical forums are bi-directional, both learning and teaching oriented. Some people expect Wikipedia here. That clearly isn't us.

Just some thoughts I wanted to express, I got it out, feel better now.