Centering vertical photos with CSS

whisperofreality

My layout for http://www.decibel.ws/gallery requires that the photos on the individual image pages be centered. I am able to do this for the horizontal photos with CSS using min-width, max-width, and right/left margins set to auto.

`.image {

min-width: 462px;

max-width: 612px;

margin: 0px auto 0px auto;

}

.image img {

min-width: 450px;

max-width: 600px;

padding: 5px;

border: 1px solid #BFBF82;

}`

However, vertical images are still aligned to the left side of the max-width setting. I'm rather stuck. Anyone who wants to take a look at this with fresh eyes would be greatly appreciated.

thinkdreams

You know what helps me the most? I use a firefox extension called CSS viewer. Once you install it, you can activate it on a page, and see all the divs, and css parameters for anything on the page. It's pretty cool and helpful for these sorts of issues.

Anyway, you can try setting margin-left:auto and margin-right:auto instead of the margin: in the .image class. See what that does. That usually works for me.

Let me know if that helps.

thinkdreams

Looking at it again, try the margin-left:auto and the margin-right:auto in the .image img class as well, and see what that does. You may only need to center the image itself in the div surrounding the image.

whisperofreality

Unfortunately, I've already tried both options and neither has worked. Technically I can get the vertical images to center but only if I define the exact width of the vertical image in the .image class. For instance, this works perfectly:

`.image {

width: 462px;

margin: 0px auto 0px auto;

}`

Sadly, I can't use it because it would mess up all my horizontal photos. Any more ideas?

thinkdreams

Give me a bit to think about it. If it's not too late, I'll check back in tomorrow after I've had a bit to experiment with a couple things.

thinkdreams

have you tried applying the style to the a instead of the image? e.g. .image a { }

what you've got (from looking at your site), is a div main, then an image div, then within the image div is the a tag and then the img tag. the a tag looks like it has no style associated with it, and the height and width is auto. this may be what is presenting an issue for your style.

see what happens if you do a margin-left:auto and margin-right:auto on the a tag instead of the img tag, since the a tag "surrounds" the img tag

Let me know, and I can help you further.

Jan

I'm not entirely sure if this is what you're trying to achieve, but you could try this:

`.image {

text-align: center;

}

.image img {

min-width: 450px;

max-width: 612px;

margin: 0 auto;

padding: 5px;

border: 1px solid #BFBF82;

}`

whisperofreality

Thanks Jan, text-align is just what I needed though I hadn't thought to try it because I wasn't dealing with text.