I’m not seeing any differences in IE8/9 but then I may be talking at cross purposes. If you mean you want the image vertically centered with x number of lines of text then that can be done after a fashion.
Thanks again Paul.
Looks promising in as far as the vertical image alignment goes. I see how you’re using the <b> (bold) tag and overriding that to instead use it as a wrapper that then aligns the image vertically. I’ve tested it in Chrome and this part is fine. As for vertically aligning the text on the left too (just just the image vertically but having the text indent an equal amount on each line) I don’t think there’s a solution.
As noted above, the way I see things is that if the text is to be centered then this method is great, otherwise if the text is to be a float left then the the method I describe in post #13 above (at the bottom) is the way to go as this guarantees that each line of text (should the text be that long) will have an equal indentation on the left. Your <b> wrapper as I see it can then optionally be applied.
In effect whether the text needs to be left or centered rocks the boat either in favour or using your method/deathshadow60’s or that noted in poast #13. All it means is that one needs to deploy two different code paths depending on what’s on the cards (centered or left text).
I keep saying “I see” though I do believe this to be the truth after all these tests and the efforts of yourself and others in this thread. Something for CSS4 perhaps?
P.S. I’ve attached a screenshot using your latest code in Chrome with multiple text lines for entertainment purposes 
I think I can see what you are getting at but there is a failure in the logic as you are asking for different things to happen to same element depending whether it is on one line or two lines.
Let me explain
The heading text is centred and when it wraps to a new line it will still be centred on that new line. That means if there is less text on the wrapped line then it won’t be aligned to the left of the text above but will be centred in the available space hence the small indent as you close and open the screen because the lines will never be the same size.
We could set the text to be justified (text-align:justify) but then of course half a line of text won’t be centred. We can’t do both unfortunately becaus it is not logical. Text is either centred or its not.
Maybe an extra rule called "centre-justified " could be created but I don’t think they will make it just for you lol
We could make the block itself centred and when the text wraps it will align left neatly but the half line at the end will be left aligned though as I mentioned earlier as you can’t make half a line beahve differently from the other half.
Of course I may have misunderstood the question:)
Yes, you “can”. At least in IE 5.5+ cf.: http://blooberry.com/indexdot/css/properties/text/textalignlast.htm
Hi Paul,
It’s been a few days and I may have lost what was exactly on my mind when I wrote that but as far as I recall it was a) I realise that text cannot be aligned left, centered, right of justified at the same time and b) given this I was merely referring to the fact that in order to achieve these two outcomes (image and text either centered on a line or image and text aligned left) I need to have two sets of different CSS classes/ID’s instead of just one, which I could then just overide with a mini additional class which would simply do float: left, or text-align: center. In effect, if I recall what was on my mind these 72-96 or so hours ago I have pretty sure I was just hoping (perhaps not hoping but looking if the opportunity exists to do so) that there’s some way to minimise the extent of CSS code. Sure there’s gzip and all and CSS compresses very well but I’m trying to keep my CSS file from growing/growing a lot. My CSS file with 90% of the CSS needed is 53KB hence my bias on keeping it small, gzip or not.
That’s interesting and thanks for the correction