CODEWITHSUNDEEP
htmlcsshtml-tablevertical-alignment
Benjamin Crouzier
Benjamin Crouzier

Reputation: 41865

How do I vertically align text and a floated image in a table cell?

How can I vertically center text on 1 line? The text may change, so I want a generic solution.

Example here: http://jsfiddle.net/rfECj/

HTML:

<table>
    <tr>
        <td>
            <img src="img.png"/>
            text on 2 lines text on 2 lines text on 2 lines
        </td>
        <td>
            <img src="img.png"/>
            text on 2 lines text on 2 lines text on 2 lines
        </td>
        <td>
            <img src="img.png"/>
            text on 1 line
        </td>
    </tr>
</table>

CSS:

table img {
    margin: 4px 6px 0 6px;
    float: left;
}

table tr td {
    width: 180px;
}

Upvotes: 0

Views: 775

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Hard to tell if this is what you want from the question, but you could use vertical-align, which works on tds.

table tr td {
    width: 180px;
    border:1px solid red; //just to see it better
    vertical-align:middle;   // add this
}

http://jsfiddle.net/rfECj/9/

Upvotes: -1

Chris
Chris

Reputation: 10328

anything wrong with using vertical-align: middle;?

Upvotes: 0

Omiod
Omiod

Reputation: 11623

The only solution that comes in mind is use more TDs, one for the image, one for the text.

http://jsfiddle.net/rfECj/5/

Upvotes: 4

Related Questions