Center image within CSS layer

  DrScott 18:19 27 Nov 2005

I'm afraid I'm at the end of my tether. And to cap it all off the search facility on the forum is broken, so if this has been answered before, then I am very sorry.

Essentially, I'm trying to be modern and use CSS and their layers. Now, what I really want to be able to do is centre (vertically and horizontally) an image within a CSS layer, though not have it as a background. I've spent the best part of 2 hours trying to find out how to do this on Google, and not getting anywhere at all.

Any help will be very much appreciated!

  Forum Editor 18:39 27 Nov 2005

and I suggest a stiff drink, an hour or so in front of the TV, and then..............

Assumimg you're using DreamWeaver

click here and download an extension called Layout Designer2

It's free, and it will do the job.

  DrScott 19:25 27 Nov 2005 much for your response. Unfortunately I can't get it to do quite what I want. Essentially I want either a layer or the image slap bang dead centre in the middle of another layer.

The reason for this, is that i'm trying to build an online gallery, where clicking a small thumbnail on the side will open up a picture on a CSS layer acting as a canvas. I'm using the behaviour script SwapImage for clicking on the thumnail together with a CSS layer sitting in the canvas layer. The real sticking point is that for every new picture that is displayed I want it to open up dead center on the CSS canvas layer with the image not being distorted by being constrained to a fixed dimension CSS layer sitting on the canvas layer. Essentially, I want the CSS layer acting as a img placeholder to expand and contract symmetrically whilst maintaining it's central position on the canvas CSS layer.

It might just be me, but I really can't get that Layout Designer to center a layer within another layer, though I can get it to center on the page. Perhaps I should have had that drink first!

This is actually quite easy to do with tables (I think!), or maybe I should just use Macromedia Flash 8. Either way, this started out as something that I thought would take a few minutes, and has me really rather frustrated instead!

  djinn 23:11 27 Nov 2005

If you have DW and FW, here's a nice wee gallery maker........

click here

The demos show the galley centering horixontally - not sure that having any div is gouing to center vertically - but it could be that with some of pvii's extensions it might be possible.

It would do no harm to contact FourLevel and ask - the bloke at Fourlaevel (Trent Pastrana) is very helpful - see their support page - glad to take pre-purchase questions.

  PurplePenny 23:42 27 Nov 2005

It is a great mystery to me why centring in CSS should be so damnably hard! Since it is such a popular layout why of why didn't one of the CSS developers think "I know what we need! We need a really easy method of centring any element vertically or horizontally"?

Oh no! Instead they give us equal margins as a way of getting something to centre. That's great if you know how wide the centre element is (so the margins are set to auto) or you want assign a width to the margins (thus allowing the centre to be flexible). But here we have a case that doesn't fit either of those scenarios: the margin has to vary according to the centre element and the centre element is not a fixed size.

I don't think that horizontal centring is possible with CSS; or perhaps I should say that I've never read anything about it.

  PurplePenny 23:46 27 Nov 2005

That last sentence should read "vertical" not "horizontal". Oh dear, must be time for bed.

  DrScott 10:12 28 Nov 2005

At least it's not just me who's struggling with centering CSS layers. One idea that has occured to me, though I haven't tried it yet (being at work and all!) is what if I set it up with tables, and then use dreamweaver to convert to layers?! I'll give it a go tonight and let you know how it went!

Thank you djinn. I've had a quick look at the link. The thing is I'm trying to avoid spending any more money... plus this has now become a challenge to me. I really have to design this gallery myself, just for the satisfaction of it, whether it destroys my soul or not!

  djinn 11:46 28 Nov 2005

Converting tables to layers in DW will produce absolutely positioned divs - so......

With some work and using the free tools a pvii it may be possible to get this working to some degree using absolutely positioned divs.

Check out their free extension ShowPic - beauty of this is that the larger images are not preloaded so it cuts down on load times.

Grab all the free extensions at pvii - I'm sure what you want to do is doable using a combo of pvii stuff.


  djinn 12:06 28 Nov 2005

PP - I hear you - it's a PITA for sure - and to keep mac IE happy it's almost a given, that widths must be declared - another PITA ;-)


  tonyespley 13:58 28 Nov 2005

>It is a great mystery to me why centring in
>CSS should be so damnably hard! Since it is
>such a popular layout why of why didn't one
> of the CSS developers think "I know what we
> need! We need a really easy method of
>centring any element vertically or horizontally"?



or margin-left:auto;margin-right:auto; if you only want to centre something.

dont forget if you want to do things like this relative to the item they are in you need, IIRC:


But, there is a problem with this very good solution which was created during the CSS specs, it is that IE does not work very well with them, if at all :'( You will need to use a proper CSS2 complaint browser (think Firefox or similar). Once way I have found allowing both to work is adding align="center" valign="center" in the tag of the item (for example <div align="center" valign="center" style="position:relative;margin:auto;">foobar</div>

If you send (or give a link) to the code your trying to use I may be able to help better ;-)


  PurplePenny 17:16 28 Nov 2005

If you had read the next paragraph of my post you woould have seen that I am well aware of how to centre. In fact the problem is that that method cannot be applied in this case.

IE6 *does* work with that code provided it is in standards not quirks mode.

For a div element the align attribute is deprecated with HTML 4 so it cannot be used with a strict DTD, only transitional; valign isn't supposed to be used at all with a div so it wouldn't validate with either transitional or strict DTD.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

AMD Radeon Adrenalin release date, new features, compatible graphics cards

8 brilliant character artists speaking at Pictoplasma 2018

iMac Pro release date, UK price & specs

Football : comment regarder la Ligue 1 en direct ?