HTML vertically align content of table cell when there's image inside

Question

Is there any way to make text vertically be aligned text Hello World! to middle of table cell without splitting into two cells?

<table border="1">
    <tr>
        <td valign="middle" style="vertical-align:middle;">
            Hello World! <img src="https://www.google.com/images/srpr/logo3w.png" border="1" />
        </td>
    </tr>
</table>

http://jsfiddle.net/U4Qs4/

Answer 1

You need to vertically align the image, not the td element.

Answer 2

Works in Chrome FF and IE7 ....

<style>
.mid {
    vertical-align:middle
    }
</style>


<table border="1">
    <tr>
        <td class="mid">
            <img src="https://www.google.com/images/srpr/logo3w.png" class="mid" border="1" />Hello World!
        </td>
    </tr>
</table>