Clever Geek Handbook

How do I vertically align the first lines of text in a table cell?

I have such a situation when the first cell of the table contains the "name" and the second cell contains some text. The text can have embedded images. When the image appears on the first line, it discards the entire first line. This makes the first text line no longer aligned with the first text in the cell. I want the first lines of both table cells to be aligned.

<table>
    <tr>
        <td class="align">one</td>
        <td>two <img src="http://www.emofaces.com/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.net/gdx0qhcc/31/

In the next game, the goal is to align the word "one" with the word "two". I know I can vertically-align: top; in the image, but it pulls the text of the second cell up and looks bad, so this is not an option. Any solution will really work, be it a css / javascript / webkit solution.

EDIT: Please note that the height and width of the image may differ. I also updated the fiddle when the image alignment was "in the middle". It doesn't really change the situation.

EDIT2: Final hack solution http://jsfiddle.net/Lqcx2vfg/ Thanks everyone.

+3


source to share


5 answers


HTML:

<table>
<tr>
    <td class="align">one</td>
    <td>two <img src="http://www.emofaces.com/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 - line height});

+2


source


Another idea ... I think what you need JavaScript for, 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

+1


source


You can put the image on the second line: change the 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.com/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;
}

Hello,

+1


source


You can use the 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.com/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>
0


source


In your specific problem, this will work

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

DEMO

0


source






More articles:


All Articles