10 replies [Last post]
dkintheuk
Offline
Regular
Reading, UK
Last seen: 13 years 47 weeks ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

All looking fine for my family news site... except for one small detail.

i can't get the bloomin' main image to sit in the middle of the main div area.

what on earth have missed...

#scratches head#

http://www.4elanclose.co.uk/

dkintheuk
Offline
Regular
Reading, UK
Last seen: 13 years 47 weeks ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

vertical-align not behaving how i expected

I take it that no-one is able to help.

In that case is there a better way of vertically aligning an image within a div?

Thanks,

Rob.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

vertical-align not behaving how i expected

Remove your height and use padding:

.main{
	width: 550px;
	margin: 10px;
	padding: 10px;
	text-align: center;
	border: 1px solid #ccc;
}

This is my big chance . . . yep, I blew it . . .

dkintheuk
Offline
Regular
Reading, UK
Last seen: 13 years 47 weeks ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

vertical-align not behaving how i expected

I see what you are saying but that doesn't vertically align the image in the div...

I have portrait and landscape pictures the landscape ones will end up at the top of the image area...

The method i used, was one i found here to force the line height to be large and then use the line based align to force the vertical alignment to be middle...

ah well... perhaps i need to do it a different way altogether...

romanandrey
Offline
Regular
Los Angeles
Last seen: 14 years 7 weeks ago
Los Angeles
Joined: 2005-08-13
Posts: 33
Points: 0

vertical-align not behaving how i expected

Here's one "it works" solution, using tables:

http://www.csscreator.com/css-forum/ftopic5253.html

Scroll down to the guru's advice

Otto
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-09-01
Posts: 5
Points: 0

vertical-align not behaving how i expected

rather than placing it in a div and vertical aligning it, set the margins to auto on the left right for the image and then add a padding and a border to create the empty space between the image and the border that you currently have.

this could be an example:

img.main {
    margin:10px auto;
    padding:20px;
    background-color:transparent;
    border:1px solid #FFF;
    }

that would make images with the class main be centered within you main content div or howvere your page is structured, and it would automatically center the image with borders away from the image. If you are really having trouble, you could use tables as a last resort, but I would recommend playing around with padding and vertical align if you insist upon using it.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

vertical-align not behaving how i expected

dkintheuk, your original method should work with the exception that the vertical-align: middle should be placed on the image and not on the containing div. Leave the line-height the height of the div as you have it. I've tested here (with the web-developer extension) and cannot get it to cooperate - I'm wondering if the javascript is to blame.

dkintheuk
Offline
Regular
Reading, UK
Last seen: 13 years 47 weeks ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

vertical-align not behaving how i expected

That is entirely possible... will retry with the vertical-align in the right place.

Many thanks all for the advice...

Rob.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

vertical-align not behaving how i expected

dk, it appears my method only works on the Mac platform (why, I have no idea). I've done testing in many browsers which seem to work (Mac only), but have negative results on PC. Here's a thread with the same discussion and an alternative:
http://www.csscreator.com/css-forum/ftopic14142.html

dkintheuk
Offline
Regular
Reading, UK
Last seen: 13 years 47 weeks ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

vertical-align not behaving how i expected

I'm glad to see it is not just me.

Hmmm will try the single table cell option later and will write back with my findings...

I have to also add a thanks for those of taking an interest in this.

Cheers,

dkintheuk
Offline
Regular
Reading, UK
Last seen: 13 years 47 weeks ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

vertical-align not behaving how i expected

Well that works and will have to do until i find a better way...

CSS should have positioning elements that allow for this.

Perhaps it does and i'm just using it wrong, perhaps i've just found one of those things that doesn't work that well yet.

Thanks yet again.