将表格单元格中的文本垂直对齐，图像浮动到左侧？

Question

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 vertical alignment of the text.

Any ideas?

Answer 1

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.

Answer 2

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).

Answer 3

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.