CSS align="absmiddle" equivalent for img tags

Hello everyone! I’ve been trying to validate my html 4.01 transitional website, and I’m stuck at finding a good CSS substitute for my align=“absmiddle” attributes in image tags. Does any of you know some nice CSS to align my text and images centered on a horizontal line (this is what “absmiddle” does)?

<img style=“margin: auto;” src=“”…

<img align=“center”…

Is this what you’re looking for?

some nice CSS to align my text and images centered on a horizontal line


img {vertical-align:middle}

Paul

Doesn’t work! :frowning: I think it might have something to do with parent/child relation of relative measurements in CSS.

I think it might have something to do with parent/child relation of relative measurements in CSS.

I’ve no idea what you are talking about lol :slight_smile: It doesn’t seem to have anything to do with your first request :

Does any of you know some nice CSS to align my text and images centered on a horizontal line

Doesn’t work! :frowning:

It could have been because I made a typo in the above (corrected now) but vertical align does work - thats it’s job. See here:

http://www.pmob.co.uk/temp/vertical-align.htm

vertical align sets the alignment of images and text (inline elements) within a single line (or table cell). It does not however align within block level elements but that wasn’t your question. :slight_smile:

Paul

OK, I figured it out. Thanks :smiley:

what was the solution?

Sorry to resurrect an old thread, but I thought it’d be better than starting a new one on the same lines…

I’m using the CSS above, though it doesn’t display properly in Firefox (the image aligns down slightly). Is this just Firefox causing problems or am I going wrong somewhere?

I doubt that Firefox is causing that kind of problems. Are you sure that you don’t have any padding or margins set on the image? Have you taken line-height into account?

There shouldn’t be any padding/margins and it displays perfectly in IE (for a change). You can see the page at http://www.neforestry.info/devdir/ - it’s the small logo in the footer.

Is that link correct or is it your error page we should be looking at :slight_smile:

Link is correct and working fine here :confused:

PS: No, it’s not the error page you’re meant to see :wink:

Hi,

I assume we are talking about the little northwood image?

If thats the case then the easiest solution is just to give mozilla what it needs.


img.smalllogo {
  vertical-align:middle;
}
html>body img.smalllogo{position:relative;top:-2px}

That should line it up with IE.

The problem is that vertical-align:middle doesn’t exactly work that simply and browsers interpret the rules differently and in the case of a small image the difference is quite noticable. If you look at my example a few posts above the example looks the same in moz and ie.

Middle aligns the the middle of an inlines element’s box with a point that is 0.5ex above the baseline of the parent element. However browsers intepret 1ex differently as some just assume it is one-half em and some work it out exactly - hence the difference.

Paul

Thanks for the help Paul. Some of these little quirks of CSS are well beyond me at the moment, but it’s my first fully CSS site so I’m just happy that it all validates hehe.