Image to the left, text centered and keeping both in center of div when text changes?

I had this question answered here: Left-align image and centered text on same level inside of a div?

I encountered an issue with this solution, however. The title has a series of font families defined. When one of the font families is not present on a user's computer, so a different font is shown, the static positioning of the image to its left becomes incorrect.

Is there a way to detect this occurring and add static positions for each font family? Or, even better, a way to just automatically keep the image in the right spot regardless of fon't size/family?

Thanks

Fiddle: http://jsfiddle.net/linmic/5L5V9/

It inherits font-family from master page code.

Here's an illustration of what I think you want, using top: 50%; image size of 48px, and top margin of -24px to keep it vertically centered:

http://jsfiddle.net/5L5V9/5/

The best way to ensure you get the font you want & the proper positioning of your image & title is to choose a font that is (legally) able to be used by @font-face.

For instructions & lots of @font-face fonts have a look at Font Squirrel

personally i like to use css background image for centering images next to text. here is an example: http://jsfiddle.net/mattimus/ZsmCG/

the downfall of this method is that you can't make the image clickable.