Vertically align text in table cell with image floated to the left?

The html:

<td>
    <img>
    text here
</td>

The css:

td img{
    display: block;
    float: left;
} 

I want the picture to be floated to the left within the cell, and the text to be vertically-aligned to the middle. Without the picture there, the text is automatically vertically aligned to the middle, but with the picture there I can't seem to change the vertic开发者_如何学Cal alignment of the text.

Any ideas?

If you know the height of the image itself you can use the line-height property.

<td style="line-height: 50px;">
    <img>Text text text
</td>

This should force the text to be displayed in the center of the line-height.

Try setting vertical-align:middle; in the CSS for the img. You may also want to consider setting that image as a background to that table cell, as you may have cross-browser issues regardless of how you position everything (setting the image as a background would avoid this).

Using line-height to vertically align text next to an image within a table cell onl*y works if you have one line of text. The next line of text will be (as in the example above) 50px below the first line of text.*

Setting the *image as backgroun*d also does not work unless you set a margin within the cell = to the width of the image on whichever side you want the image to align.