I'm just checking up my website, www.creaturefeature.info, with validator.w3.org, and apparently the align="absmiddle" function is not supported on all browsers. Is there a way to do something similar with CSS to avoid some browsers not supporting it?
I have never even heard of anything like "absmiddle". However, I take it that it stands for "absolute middle". If so, one of the following will work:
<center><p>Old HTML style center</p></center>
<div style="margin: 0px auto; width: 100px;">
CSS center
</div>"absmiddle" is a proprietary attribute for vertical centering which is why it isn't supported by all browsers. The closest you could get in CSS would probably be to use "vertical-align:middle".
<img src="my-image.png" style="vertical-align:middle">
Actually, vertical-align:middle puts the center of an image at 1/4 em above the text baseline, not at the center of the line height. This doesn't match what absmiddle looks like. I have found the following CSS to approximate 'absmiddle' better:
IMG.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
}
You might be tempted to adjust the top margin by -.25em so as not to muck with the line height, but this can cause problems with elements above, such as lines in tables, so I don't do it.
THANK YOU. You seem to be the first, and only, person on the entire internet to figure this one out. It was the .25em trick that did it.
Been racking my brains with this one for a while. Thanks so much! The .25em margin-bottom definitely did the trick!
Guess vertical-align:middle; CSS directive works exactly the same way as align=absmiddle attribute as of now [just tested with the latest FF, Opera, Chrome and IE - 20090429]. Make sure the CSS I posted propagates to the element correctly - use Firebug for FF if necessary to make sure of it.
