Iframe Center Align (Horizontal)

by FineryWorkshop February 14th 2015, 4:19 am

So, I'm trying to center my iframe and every tutorial I've looked up so far hasn't worked. I know it sounds stupid that I can't do it, but I'm having trouble with it

Here's the code I have:

Code:: <style> iframe{ align: center !important; position: center !important; } </style> <iframe src="http://apps.pixlr.com/editor/" width="1500" height="600" frameborder="0" ></iframe>

I tried putting it in a table, and a ton of other things. But it just doesn't want to center Sad

I also tried it as a simple HTML file off my website and it doesn't work, so it's not something on my website.

by _Twisted_Mods_ February 14th 2015, 4:40 am

have u tried wrapping the iframe with <center> </center> tags

by FineryWorkshop February 14th 2015, 5:19 am

_Twisted_Mods_ wrote:have u tried wrapping the iframe with <center> </center> tags

Yes, still no difference

by _Twisted_Mods_ February 14th 2015, 5:27 am

well y im already on ur forum wheres this iframe located?

by **SLGray** February 14th 2015, 9:27 am

Code:: <center><iframe src="http://apps.pixlr.com/editor/" width="1500" height="600" frameborder="0" ></iframe></center>

by Ange Tuteur February 14th 2015, 9:42 pm

If you want to center an element with CSS use margin:0 auto; or margin:auto;
( note : that the element should be block-level )

Code:: iframe { margin:0 auto; display:block; }

Now if you wanted to center the content inside another element, you can use text-align:center;

HTML :

Code:: <div class="center"> <iframe src="/null"></iframe> </div>

and CSS :

Code:: .center { text-align:center }

by FineryWorkshop February 15th 2015, 12:33 am

Thank you all so much all your help. I figured out the problem. (At least I think, it works now.) I made the width too long for the link so it just didn't carry on and so when I centered it it was centering the iframe not the link Smile

And here's the code I ended up with for future viewers (?)

Code:: <style> .center { text-align:center; width:100%; } iframe{ width: 1000px; } </style> <div class="center"> <iframe style="align: center;" src="http://apps.pixlr.com/editor/" width="1500" height="600" frameborder="0"></iframe> </div>

by Ange Tuteur February 15th 2015, 1:38 am

You're welcome, that will work fine. Wink

By default the <div> element should span the entire width of its parent container, -- similar to 100% width -- because it's a block-level element. This gives a pretty good explanation on block-level and inline elements. Smile