CSS image horizontal align problem

[ptemedia]

Hi, I am having problems centrally aligning an image. The basic HTML is shown below. I have taken out other elements that are not effecting this problem:

<div id="ImagePlaceholder">	
          <div id="Images">
               <img class="current" src="photo1.jpg" alt="" />
	       <img class="nextimage" src="" alt="" />
          </div>
</div>

and the CSS is:

#ImagePlaceholder {
	margin: 1.5% 2% 1% 2%;
	height: 70%;
	width: 96%;
	background-color: #333;
	display: block;
}
#Images{
	position:relative;
	height: 100%;
	max-width: 100%; <!-- 100px -->
	margin: auto;
}
#Images img {
	display: block;
	position: absolute;
	max-width: 100%;
	height: 100%;
	margin: auto;
}

Image placeholder is contained within a static div, with the option to go absolute for a full screen effect of its parent div hence the percentage values rather than em or px. I have been stuck on this problem for some hours now and can't find a fix on google. The code does kind of work if max-width of #Images is in px but it is never exactly in the centre and the value required would have to change for every image. When max-width of #Images is in a percentage it always aligns to the left.

Finally, it was working when the images were stored in a list, but had to change html accordingly as it is undesirable to load 20-30 images before the page can be used. (It is a page with thumbnails loaded into the next image img so that it can fade between them. I have all the jquery for this working so would like to avoid changing the html too much.

Any insight or help is much appreciated.

[Arkinder]

You have to have a set height with a px or em unit. Otherwise you're saying height: 70%; should be 70% of nothing, which equals nothing.

Just throw it in a body selector.

body { width: 100%; height: /* xem/xpx */;}

Regards
Arkinder

[ptemedia]

You have to have a set height with a px or em unit. Otherwise you're saying height: 70%; should be 70% of nothing, which equals nothing.

Just throw it in a body selector.

body { width: 100%; height: /* xem/xpx */;}

Regards
Arkinder

Oh right, i forgot to mention, ImagePlaceholder is 70% of #Gallery_min div which has a height of 500px.

Unless the div is to be fullscreen it is absolutely positioned and so it uses #Gallery_max div which has a height and width of 100%. This is therefore the height and width of the browser.

Thanks

[Arkinder]

I don't really understand what it is you're trying to do. You're using position: absolute; which removes the images from the normal flow of the page, which will cause them to stack on top of each other. You're also using margin: 0 auto; with display: block; So I can only assume that you're trying to center the images within their containing element. To do this, make these changes. Removed properties in red. Changed/New properties in green.

#Images {
    position:relative;
    text-align: center;
    height: 100%;
    max-width: 100%; <!-- 100px -->
    margin: auto;
}
#Images img {
    display: block;
    position: absolute;
    max-width: 100%;
    height: 100%;
    margin: auto;
}

If this is not what you're going for, then please be more specific.

Regards
Arkinder

[ptemedia]

Apologies for being very vague in my description. I have just read over it now. I am basically making an image gallery. The user clicks a thumbnail and the image appears in the placeholder. Fading out the old one so that only the new image (placed behind the current one) will be seen.

It was initially very similar to this tutorial using images within a list: http://jamesvec.com/simple-jquery-thumbnail-gallery/

However, It wasn't ideal loading all the images immediately as it would take a long time to load them all, (after re-sizing them all to be a suitable size) and so I edit the code to have currentimage and nextimage. When a thumbnail is selected, next image.src becomes the required src and currentimage fades out to reveal it. Then the classes are switched so that the process can be carried out again.

the height: 100% of the image fits fine so that all images appear to be the same height. However, the width of the images varies quite a bit (especially with vertical images). So I am trying to centre align the images that are absolutely positioned, with in the relative positioned #Images.

I hope this makes more sense, but I am beginning to think its impossible without having a fixed width. Maybe I should try different methods of fading between two images?

[Arkinder]

Oh, lol. For the margin: auto; to work just give the absolutely positioned element a left and right value.

#Images img {
	display: block;
	position: absolute;
	max-width: 100%;
	height: 100%;
	margin: auto;
	left: 0;
	right: 0;
}

top, bottom, left, and right are the margin equivalent for absolutely positioned elements. Basically, the default values are nothing, where the default for margin is 0. If that makes sense.

Regards
Arkinder

[ptemedia]

Cheers Arkinder! Works fantastically! I don't know why I didn't try that, late nights of work are not ideal! Have a nice day! :)

[G&G Designing]

its not

margin: auto;

its

margin:0 auto;

to center everything to the middle of the browser

[Arkinder]

You're mistaken. What actually centers the element is a combination of:

margin-left: auto;
margin-right: auto;

As long as you have the left and right margins set to auto, the top and bottom value doesn't matter. margin: auto; is perfectly valid.

Regards
Arkinder