Vertically Centering Text and Images

I'm having trouble vertically centering both images and text together.
Here is the (untidied) code I'm using for testing purposes:

<div style="float:right;clear:right;font-weight:normal;height:26px;line-height:1.9">
<img src="images/esp_flag.gif" width="21" height="16" style="vertical-align:middle;margin-top:-3px" /> Español | <img src="images/chn_flag.gif" width="21" height="16" style="vertical-align:middle;margin-top:-3px" /> 中文简体</div></div>

And here's how they look in the 2 main browsers:

http://www.divshare.com/img/5312305-0d9

The vertical-align:middle works for firefox but not IE. Can anyone tell me what I need to add to get everything vertically centered properly?
Thank you.

I would move the css to the head section of the page. Then I would add a IE hack to add a top padding. Once I got it working, I would then move the css to its own file.

The hack might look like this:

#yourdivid or img or .yourclass {
_padding-top: 3px; }

where you adjust the size to where you want it.