I have this situation where first table cell contains "name" and second cell some text. Text may have embedded images. When image appears on the first line it pushes down entire first line. It makes first text line to be no longer aligner with first cell text. I want to make first lines of both table cells aligned.

<table>
    <tr>
        <td class="align">one</td>
        <td>two <img src=".gif" /> three three three three three three three three three three three three three three three three three three three</td>
    </tr>
</table>

/

In following fiddle goal is to align word "one" to word "two". I know i could vertical-align: top; on image, but it pulls text of second cell up and it looks bad therefore it is not an option. Any kind of solution would work really, be it css/javascript/webkit-only solution.

EDIT: Note that height and width of image may vary. I also updated fiddle with image alignment being "middle". It does not change situation really.

EDIT2: Final solution "hack" / Thank you everyone

I have this situation where first table cell contains "name" and second cell some text. Text may have embedded images. When image appears on the first line it pushes down entire first line. It makes first text line to be no longer aligner with first cell text. I want to make first lines of both table cells aligned.

<table>
    <tr>
        <td class="align">one</td>
        <td>two <img src="http://www.emofaces./en/emoticons/v/vampire-emoticon-before-lunch.gif" /> three three three three three three three three three three three three three three three three three three three</td>
    </tr>
</table>

http://jsfiddle/gdx0qhcc/31/

In following fiddle goal is to align word "one" to word "two". I know i could vertical-align: top; on image, but it pulls text of second cell up and it looks bad therefore it is not an option. Any kind of solution would work really, be it css/javascript/webkit-only solution.

EDIT: Note that height and width of image may vary. I also updated fiddle with image alignment being "middle". It does not change situation really.

EDIT2: Final solution "hack" http://jsfiddle/Lqcx2vfg/ Thank you everyone

• javascript
• html
• css

• 1 Hmm, I'm not sure I understand the question - is it okay if the text in both cells are aligned to the bottom (like this: jsfiddle/gdx0qhcc/2)? Or? – Lasse Christiansen Commented Aug 10, 2014 at 10:43
• Not really no.. It is like IM chat window where "one" is name of sender and second cell is message. Name is supposed to be at top of message but aligned with first row. I am thinking if we could somehow get only text in first row then height of images on that row could be checked and first cell on each row could be adjusted manually with javascript. But i have no idea how to get text on the first row either. – novist Commented Aug 10, 2014 at 11:02

5 Answers 5

HTML:

<table>
<tr>
    <td class="align">one</td>
    <td>two <img src="http://www.emofaces./en/emoticons/v/vampire-emoticon-before-lunch.gif" /> three three three three three three three three three three three three three three three three three three three</td>
</tr>

CSS:

*{
    margin: 0;
    padding: 0;
}
table, tr, td {
    border: solid 1px red;
    line-height: 16px;
}
.align {
     vertical-align: top; 
}

JavaScript:

$(document).ready(function() {
$('.align').css('padding-top',(parseInt($('img').css('height'))-16)+"px");

//16 is the line-height });

You can put image into second row: modify HTML and CSS as shown below:

HTML

<table>
    <tr>
        <td class="align">one</td>
        <td>two three three three three three three three three three three three three three three three three three three three</td>
    </tr>
    <tr>
        <td style="border-top:none;">
        </td>
        <td>
            <img src="http://www.emofaces./en/emoticons/v/vampire-emoticon-before-lunch.gif" /> 
        </td>
    </tr>
</table>

CSS

table, tr, td {
    border: solid 1px red;
}

.align {
    vertical-align: top;
    border-bottom:none;
}

Regards,

Another idea... I think that what you want requires JavaScript, yeah...

span {
    display: inline-block;
    vertical-align: middle;
    height: 10px; width: 50px;
}
span img {
    float: left;
    position:absolute;
    margin-top: -25px; /* Try with -5px. */
}

JSFIDDLE

You could use a span element:

<table>
    <tr>
        <td class="align"><span class="align">one</span></td>
        <td><span class="align">two </span><img valing src="http://www.emofaces./en/emoticons/v/vampire-emoticon-before-lunch.gif" /><span class="align"> three three three three three three three three three three three three three three three three three three three</span></td>
    </tr>
</table>

In your specific problem this will work

.align {
    vertical-align: center;
    padding-top:15px;
}

DEMO