Get portrait image also centred

Anything questions related to styling should go in here.
Post Reply
User avatar
Robbedoesie
Posts: 97
Joined: Thu May 19, 2011 7:37 pm
Location: Enkhuizen, Holland

Get portrait image also centred

Post by Robbedoesie »

Hello,
in the image gallery i am trying to position the images. The landscape images are positioned well butt the portrait images are not.
How can i position also the portrait images well without losing the caption? I of course tryed to position the images, but sometimes the caption moved to the side of the image or in the image itself.
This is the image gallery; http://www.robcnossen.nl/uploads/gallery.php

Thanks,
Robbedoesie
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Get portrait image also centred

Post by jacek »

You should be able to centre them by setting their margin to auto
img {
    display: block;
    margin: 0px auto;
}
Image
User avatar
Robbedoesie
Posts: 97
Joined: Thu May 19, 2011 7:37 pm
Location: Enkhuizen, Holland

Re: Get portrait image also centred

Post by Robbedoesie »

Of course it is working. Thanks for your answer.

I have done that before, the margin:0 auto, and the images moved to almost outside of the screen. I thought, that is not the middle of the image container, but after i gave the container a border i saw that the container was much bigger than i thought.

It is better for me to give the container a border and then experiment with it. I have seen that i am using the container wrong for what i want to achieve.
I gonna experiment further with this. Hopefully with success, if not i come back to your forum.
User avatar
Robbedoesie
Posts: 97
Joined: Thu May 19, 2011 7:37 pm
Location: Enkhuizen, Holland

Re: Get portrait image also centred

Post by Robbedoesie »

I figured it out how to get the image with the caption on the place where i want the image and caption by using the following code;
#imagecontainer{
		width:60%;
        float: left;
        position:fixed;
        margin-left:29%;
        top:19%;
}
#image {
		display:table;
		margin-left:auto;
		margin-right:auto;
}
I placed a div container(#imagecontainer) outside the div container(#image) with the images and captions are showing up and then i could center the images.

It works in Firefox but not in Internet explorer. There the captions is not under the images but on the right side of the image. After trying to get the caption under the images somehow the portrait images are again not on the position where i want them to be.

Internet explorer 7 does not support display:table; but how can i get this also working in internet explorer?
Thanks
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Get portrait image also centred

Post by jacek »

Robbedoesie wrote:Internet explorer 7 does not support display:table; but how can i get this also working in internet explorer?
You don’t really have to anymore, IE7 is old ;) But There are lots of people asking this question http://www.google.co.uk/search?hl=en&q= ... paly+table
Image
Post Reply