19 replies [Last post]
adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

Hi, i'm trying to achieve this result: http://img181.imageshack.us/img181/4451/73684771rz1.jpg
How can i do that? Considering that the div is width/height fixed, but the width/height image can vary.
The orizonal alignment works with just a simple text-align:center, but what about the vertical one ? vertical-align is only for the text. (i can't do any fixed padding/margin as i don't know the image dimensions, and i cant't give a fixed width/height to the image, to mantain the ratio)
For now i've something like this:

x

Triumph (not verified)
Anonymous's picture
Guru

vertical-align: middle; on

vertical-align: middle; on the surrounding div IF you also define it as display: table-cell;

It can be unpredictable though as it sometimes displaces the div in the layout. That can be prevented by surrounding it with another div defined as display: table; That's making me feel a bit uneasy though as it is bordering on divitis. But they do have a purpose in this case.

Triumph (not verified)
Anonymous's picture
Guru

It doesn't seem to work in

It doesn't seem to work in IE though. BAH! Sorry.

Doing much the same thing, using has been discussed in the past.

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

it worked, thanks

it worked, thanks Smile

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

Triumph wrote:It doesn't

Triumph wrote:

It doesn't seem to work in IE though. BAH! Sorry.

Doing much the same thing, using has been discussed in the past.

Sigh, I've tried with firefox, konqueror and opera and it works.....i hate IE Sad it doesn't just with the 6 or also with the 7?
i wanted to avoid the tables for something like this... Sad

Triumph (not verified)
Anonymous's picture
Guru

Yeah. IE is where the fun

Yeah. IE is where the fun is.

Do you know the height and width of every image presented in this way? Are they always going to be the same?

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

Nope, the height and width

Nope, the height and width are always different. I know them, but it could be quite cpu expensive (which can be used for something else) to do for each some calculation to know how much padding do.
I think that the best and fast solution at this point is to go with the tables... or at least when i get a pc with IE i'll try if the ie7-js script ( http://code.google.com/p/ie7-js/ ) correct something about the previous solution with the divs

Triumph (not verified)
Anonymous's picture
Guru

adiemus wrote:Nope, the

adiemus wrote:

Nope, the height and width are always different. I know them, but it could be quite cpu expensive (which can be used for something else) to do for each some calculation to know how much padding do.
I think that the best and fast solution at this point is to go with the tables... or at least when i get a pc with IE i'll try if the ie7-js script ( http://code.google.com/p/ie7-js/ ) correct something about the previous solution with the divs

I see. If you knew the height you could position it absolutely and then give it a negative top margin of half the height and a top:center;. That would get messy with different sizes though.

Either Gary or Tyssen had written something on this in the past.

I'll have to look into that script. Neat.

Triumph (not verified)
Anonymous's picture
Guru

Ah, here's the stuff by

Ah, here's the stuff by Gary: http://gtwebdev.com/workshop/vcenter/

Hope that helps more than I did. Smile

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

i'll read it. thanks if you

i'll read it. thanks
if you don't know that script it corrects some bad behaviours of IE, i saved a lot of time using that instead of correct the css only for IE (or adding another css just for IE)... and it also adds the hover effect for the input fields and the png transparency in IE6 Smile

Triumph (not verified)
Anonymous's picture
Guru

I've been thinking about it

I've been thinking about it and was thinking that perhaps jQuery could be activated when IE is used to view. It could either measure the height of the image and center it vertically or even put a and around the image as needed. If javascript isn't active on the IE browser it will still degrade well (image at the top, just not vertically centered).

What do you think?

Triumph (not verified)
Anonymous's picture
Guru

adiemus wrote:i'll read it.

adiemus wrote:

i'll read it. thanks
if you don't know that script it corrects some bad behaviours of IE, i saved a lot of time using that instead of correct the css only for IE (or adding another css just for IE)... and it also adds the hover effect for the input fields and the png transparency in IE6 Smile

Very nice. Smile It's not usually that hard to fix IEs screw-ups. I don't know if I'd use it but it's nice to know it's there.

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

it would be a nice solution,

it would be a nice solution, but in that case jquery would be loaded just for that (for now i'm not using it), so "a lot" of kb would be loaded just to vertical align some images Smile i'll think about that when i'll use jquery (or prototype/scriptaculous, i don't know yet which one). for now i try the one with divs and that script, then i'll read that page you posted before Smile
thanks

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

Is there any other content

Is there any other content within the div? If not, try setting the line-height to that of the div height and vertical-align: middle;

Triumph (not verified)
Anonymous's picture
Guru

wolfcry911 wrote:Is there

wolfcry911 wrote:

Is there any other content within the div? If not, try setting the line-height to that of the div height and vertical-align: middle;

Excellent idea. Smile

On the jQuery idea: Which is better, loading jQuery one time (cached) or loading extra markup every time? I suppose it depends on how many of these items will end up on the page.

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

wolfcry911 wrote:Is there

wolfcry911 wrote:

Is there any other content within the div? If not, try setting the line-height to that of the div height and vertical-align: middle;

Just the image and a link on that.
Do you mean something like this?

x

This doesn't works Sad

Triumph (not verified)
Anonymous's picture
Guru

<div

<div style="height:170px;width:170px;line-height:170px;text-align:center;border:red solid 1px;background:blue;"><a href="#"><img style="line-height:170px; vertical-align:middle;" src="x.jpg" alt="x" /></a></div>

adiemus
Offline
newbie
Last seen: 11 years 36 weeks ago
Joined: 2009-01-09
Posts: 10
Points: 0

Triumph wrote:<div

Triumph wrote:

<div style="height:170px;width:170px;line-height:170px;text-align:center;border:red solid 1px;background:blue;"><a href="#"><img style="line-height:170px; vertical-align:middle;" src="x.jpg" alt="x" /></a></div>

it works Smile at least with {all / IE6-7 browsers}.... with IE6-7 nothing, neither with that script... luckily with IE8 it works Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Set the font-size to the

Set the font-size to the same value as height and line-height to get it to work in IE.

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

I've found it to work in IE7

I've found it to work in IE7 (but not 6) with either a transitional or strict doctype (putting the browser in standards mode). The vertical-align would not be needed except for IE6 and as Chris stated, with the use of font-size.