center an iframe with css?

Discussion in 'Web Design and Development' started by Starhorsepax, Jun 26, 2011.

  1. macrumors member

    Joined:
    Jun 6, 2010
    #1
    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. :confused:
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. elppa, Jun 26, 2011
    Last edited: Jun 26, 2011

    macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #3
    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:
    Code:
    iframe {
        display: block;
        width: 800px;
        height: 400px;
        margin: 0 auto;
        border: 0;
    }
    
    Code:
    <iframe src="http://www.apple.com/"></iframe>
     
  4. thread starter macrumors member

    Joined:
    Jun 6, 2010
    #4
    THANK YOU! :eek: That worked!
     
  5. macrumors newbie

    Joined:
    Feb 20, 2013
    #5
    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)
     
  6. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    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.
     
  7. macrumors 6502

    Joined:
    Sep 3, 2009
    Location:
    CT
    #7
    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.
     
  8. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #8
    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.
     
  9. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    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. ;)
     
  10. macrumors newbie

    Joined:
    Feb 25, 2014
    #10
    CSS vs Inline

    Is there a way to implement these changes using inline CSS?

    Example:

    <span style="display: block; width: 800px; height: 400px; margin: 0 auto; border: 0;"><iframe src="http://mypage.com"></iframe></span>

    OR something like...

    <iframe src="http://mypage.com" height="400" width="800" display="block" frameborder="0" margin="0 auto" marginwidth="0" marginheight="0" scrolling="no"></iframe>

    Thank you,
     
  11. macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #11

    Inline CSS isn't a great approach. It seems like you are nearly there though… just add the style attribute directly to the iframe:

    Code:
    <iframe src="https://bing.com" scrolling="no" 
            style="display: block; width: 800px; height: 400px; margin: 0 auto; border: 0;">
    </iframe>
    
     
  12. macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
    #12
    Couldn't agree more. Typically you want to keep your content, presentation, and behavior separate. While this holds true MOST of the time, this is an old rule and nowadays there are exceptions to this rule. In regards to his needs and example, the rule holds true. It is best practice to keep them separate. You are 100% on the mark.


    Great article on the subject.
    http://blog.teamtreehouse.com/the-separation-of-structure-presentation-and-behavior-is-dead)
     

Share This Page