A Site for Photographers by Photographers

Community > Forums > Website Creation > Building a Site > How to center iFrame content

How to center iFrame content

Miss C , Jul 03, 2011; 07:44 a.m.

I am building an image gallery for my new website, using tables and iframe.
I am satisfied with the result for horizontal images (see attached file).
But I would like to center the vertical images, which now appear to the left (see attached file).
Here's the HTML code I used for the iframe:

<iframe name="frmPhotos" src="images/TestiFrame/wolf.jpg" frameborder="no" height="550" scrolling="no" width="100%"></iframe><br />

I tried adding the following code to the iframe line without success:

If you know the solution, thanks in advance for sharing!

Horizontal images viewing


    1   |   2     Next    Last

Miss C , Jul 03, 2011; 07:58 a.m.

Oups, the screen capture below shows how the vertical images appear.
I've added a black frame so you can better see the alingment.
Also, I should state that all the images that appear are NOT mine. They are used here only for test purpuses.

Vertical image viewing

Noreen Doyle , Jul 03, 2011; 09:00 a.m.

I'm rather new at this sort of thing, too, but this might answer your question. Mightn't hurt to try, anyway:


Michael Axel , Jul 03, 2011; 09:43 a.m.

It's been awhile since I've used iframes, but shouldn't the content you're referring to have the center alignment?

You can also put the iframe code in a div code, as in

<div align="center"><iframe blah blah blah></iframe></div>

Another solution might be to use some css code, but again, you probably need to center your image in the content referred to by the iframe (which looks to be your flickr page, possibly?).

One more thought: some browsers have compatibility problems with iframes. Are you using Firefox? Then try IE and see what it looks like.

Damon D'Amato , Jul 03, 2011; 11:12 a.m.

See if this works.

The following code will center the image on your iframe page (the one with the image, not the one with the gallery.) Replace image width with the number of pixels wide you want the image to display-- probably the actual width in pixels of the image. (I had to upload as a graphic because photo.net was stripping some of the the html code out)

Once it's centered on that page, it should stay centered in the iframe on the gallery page

Code example

Wouter Willemse , Jul 03, 2011; 11:38 a.m.

I think you should try to avoid iFrames completely for this. Apart from having quite some quirks in Internet Explorer, iFrames also do not work well for bookmarking (regardless of browser). It's an 'old' technique, and there are better options: <div> and CSS would work here. Using an iFrame with a page from another website causes even more issues in newer browsers due to security settings.

Being lazy, I'd just take JAlbum (which creates pages much like this, certainly without iFrames), build an album and study the HTML it outputs.

Noreen Doyle , Jul 03, 2011; 12:18 p.m.

Wouter, could you please expand on what kinds of problems using an iFrame can cause? The Internet Bird Collection (ibc.lynxeds.com) uses iFrames in the code they offer to allow videos hosted on the site to be embedded elsewhere. This is the only time I use them (so far, anyway), to embed an IBC video, and I'm curious about what kind of trouble this might cause.

Wouter Willemse , Jul 03, 2011; 06:34 p.m.

I'm not saying they do not work, but iframes are not the best solution, certainly not if you want to load just a picture in it, rather than a full HTML document.

First, the issue with bookmarks; you typically bookmark the original page, which contains only a reference to the originally loaded iFrame. Users can find this very annoying, because it is unexpected behaviour (same problem with normal frames, and is also not always resolved with DIVs).
The security issues are more pressing, if (that's an if) the page you embed in the iFrame has a different domain name than the original frame. Check for example here for more info.
There is some ugliness in an iFrame on a low resolution screen, suddenly turning into scrollable content. This may be a case of personal preference, but I see it as poor design when that happens. And given the amount of cellphones accessing the internet, you should consider how low-resolution devices render it.

Given the look of the site you show above, I think you should have a look at using DIV's instead. If you do want to use iFrames, indeed you should center the image on the HTML page referencing the large photos, as Damon said. In your example, you link to the large JPEG for the iFrame instead, but that won't work if you want to use alignment, you need an additional near-empty HTML document.

And that's another point: creating a HTML page to only contain a single photo for each photo is a bit extra work you should not need to take - the iFrame solution just does not seem flexible enough here to me. With DIVs, you'd have one HTML page handling all.

Damon D'Amato , Jul 03, 2011; 08:09 p.m.

Wouter's right. Not the optimal solution.

How does your gallery work? Does it display a full sized photo while you hover over a thumbnail, or does it display it once it's clicked, (or both?) There are very simple solutions for all of these that don't require iframes.

For instance, there are javascript "rollover galleries" all over the web that work in a similar way to rollover scripts for buttons, etc-- an A image that changes to B image while the mouse is over the button. What's different is that a rollover gallery displays the B image (in this case, the full sized image) in a div.

Noreen Doyle , Jul 04, 2011; 08:05 a.m.

(Thanks, Wouter; what you wrote clarified things for my own question.)

    1   |   2     Next    Last

Back to top

Notify me of Responses