Simon Kittle wrote: >Hey, > >I'm after a simple way to get the equivalent of > ><table height="200px"> ><tr> ><td valign="center">text thats 10px height</td> ><td valign="center"><img src="graphics/image_20px_high.png" /></td> ></tr> ></table> > >I'm aware that I can use the line-height CSS property center the line >object in the container, as so: > ><div style="height: 200px; font-size: 10px; line-height: 200px"> >text thats 10px height ><img src="graphics/image_20px_high.png" /> ></div> > >And that will successfully vertically align both the txt and image >within the DIV. However what it doesn't do is vertically align each, >individually. So the text and the image share the same baseline >meaning the large image pops up above the text (rather than the text >appearing as if it were on a horizontal line through the middle of the >image). > >How can I achieve this behavior? > >Thanks > > Hi Simon, I think that even if you get the text in the vertical centre of the img's, this solution will come to problems if the text between is too long and has to wrap. Then the second line has to come on the line-height of 200px lower, isn't?
I was experimenting also somewhat, but didn't succeed as well. I tried to use the vertical-align property for the images first, which gets the textline good between, but again *only* if the line doesn't wrap. Among others, I tried also to make an inline-block of the text, so wrapping is permitted without attacking the surrounding box with the images in it. Does work (with one normal image and one background-image), but *only* in IE (and then without correct vertical center). Though it should be possible to work in Firefox / standards compliant browsers also, I guess. Maybe I've made an error somewhere, maybe it can be improved. The draft page of my experiments is this one <http://home.tiscali.nl/developerscorner/css-discuss/img-txt-img-experiments.htm>, so you can see my struggle. ;-) The question reduced to a box question is included. francky ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
