CODEWITHSUNDEEP
htmlcssimagehtml-tablevertical-alignment
dmr
dmr

Reputation: 22333

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

Any ideas?

Upvotes: 1

Views: 12618

Answers (3)

user3182890
user3182890

Reputation: 1

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.

Upvotes: 0

Joel Etherton
Joel Etherton

Reputation: 37533

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.

Upvotes: 5

matthewpavkov
matthewpavkov

Reputation: 2928

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

Upvotes: 1

Related Questions