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

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?

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

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

Comments

[Jeremy B.]

do you want the text below or to the right of the image?

[matthewpavkov]

I've used this method many times! Wish I had thought of this first.

[Joel Etherton]

@matthewpavkov - I only thought of it because I've often been peeved about image alignment now that using align="middle" is deprecated in the image tag.

[Joel Etherton]

@dmnc: True, but that's also a condition I assumed from the context of the question. Nothing from OP's question indicated a request for a multi-line or universal solution, and this obviously assisted him/her. I must have missed your answer below.

[dmnc]

@dmr for this to work you'll need to remove the float: left; and display: block;.

[dmnc]

@JoelEtherton Please, it was not an attack. It's a caveat that is useful for people to be aware of.