Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jun 26, 2011, 11:06 AM   #1
Starhorsepax
macrumors member
 
Join Date: Jun 2010
center an iframe with css?

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.
__________________
Macbook Snow Leopard; Intel Core 2 Duo, 2.4 Ghz 2 GB RAM
Imac Panther and OS 9 G3 with around 300 RAM
Mac still rules. My aging Imac can still run circles around some newer PC.
Starhorsepax is offline   0 Reply With Quote
Old Jun 26, 2011, 01:55 PM   #2
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
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.
angelwatt is offline   1 Reply With Quote
Old Jun 26, 2011, 03:46 PM   #3
elppa
macrumors 68040
 
elppa's Avatar
 
Join Date: Nov 2003
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>

Last edited by elppa; Jun 26, 2011 at 03:52 PM.
elppa is offline   2 Reply With Quote
Old Jun 26, 2011, 05:37 PM   #4
Starhorsepax
Thread Starter
macrumors member
 
Join Date: Jun 2010
Quote:
Originally Posted by elppa View Post
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>
THANK YOU! That worked!
__________________
Macbook Snow Leopard; Intel Core 2 Duo, 2.4 Ghz 2 GB RAM
Imac Panther and OS 9 G3 with around 300 RAM
Mac still rules. My aging Imac can still run circles around some newer PC.
Starhorsepax is offline   0 Reply With Quote
Old Feb 20, 2013, 11:23 AM   #5
George Florida
macrumors newbie
 
Join Date: Feb 2013
Quote:
Originally Posted by elppa View Post
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>
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)
George Florida is offline   0 Reply With Quote
Old Feb 20, 2013, 01:48 PM   #6
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by George Florida View Post
......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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Feb 20, 2013, 01:55 PM   #7
dma550
macrumors 6502
 
Join Date: Sep 2009
Location: CT
Quote:
Originally Posted by George Florida View Post
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.
dma550 is offline   1 Reply With Quote
Old Feb 22, 2013, 03:11 PM   #8
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Quote:
Originally Posted by dma550 View Post
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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Feb 22, 2013, 03:51 PM   #9
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Feb 25, 2014, 03:13 PM   #10
gsilver352
macrumors newbie
 
Join Date: Feb 2014
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,
gsilver352 is offline   0 Reply With Quote
Old Feb 25, 2014, 03:58 PM   #11
elppa
macrumors 68040
 
elppa's Avatar
 
Join Date: Nov 2003
Quote:
Originally Posted by gsilver352 View Post
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,

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>
elppa is offline   0 Reply With Quote
Old Feb 25, 2014, 04:09 PM   #12
Flood123
macrumors 6502a
 
Flood123's Avatar
 
Join Date: Mar 2009
Location: Living Stateside
Quote:
Originally Posted by elppa View Post
Inline CSS isn't a great approach.
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-se...havior-is-dead)
__________________
Yada, yada, yada.
Flood123 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Tags
centering, divs, iframe

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
iFrame video with Nikon camera (L)SD Digital Video 2 Oct 26, 2013 03:42 PM
iFrame Widget (show Google Drive) techydud3 OS X 0 Oct 25, 2013 01:07 PM
Best import and export settings for iMovie HD (6.0.4) using iFrame video lipwak Digital Video 0 Nov 30, 2012 06:26 PM
Is iFrame 720p from iMovie on iPhone 4S worth to use? bronzeye007 iPhone and iPod touch Apps 2 Aug 20, 2012 04:41 PM
smooth scrolling jquery in iframe Flood123 Web Design and Development 1 Jul 11, 2012 06:47 PM

Forum Jump

All times are GMT -5. The time now is 01:56 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC