How to properly align icon and text in a table?


Tags: html,css,html5,html-table,tablelayout

Problem :

I am having trouble trying to vertically align the icon with the text. Basically, I'm trying to have the image icon to the top of the <td> tag, right now, it's in the middle as shown in the jsfiddle: http://jsfiddle.net/TheAmazingKnight/N6fLp/

I put border:1px dotted blue; to see clearly where each element is being spaced. By default, the td tag that wraps the img tag is centered. How do I put the img tag and title header to the very top of the table's td tag and align adjacently with the text?

I tried to imitate the result by putting vertical-align:text-top but that didn't work. I also tried position:relative to the table and then setting the image to top:0; but to no avail that didn't work either. What am I missing here?

HTML:

<table>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
        <td>
            <strong>Title header</strong>
            <br>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <ul class="arrowLink">
                <li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <ul class="arrowlink">
                <li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <ul class="arrowlink">
                <li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

            <p>Lorem ipsum</p>

            <ul>
                <li>Hola <a href="javascript:showNotice('#')">Google</a><br>
                    <br>
                </li>

                <li>Include completed <a href="#" target="_blank">Lorem ipsum</a></li>
            </ul>

            <p>Mail to:<br>
            Lorem Ipsum<br>
            Attn: Lorem Ipsum<br>
            1234 Main Street<br>
            NY NY 12345</p>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
        <td>
            <strong>Title Header</strong><br>
            Lorem <a href="javascript:showNotice('#')">Lorem</a> website Lorem ipsum

            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

            <p class="small">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </td>
    </tr>
</table>

CSS:

*{border:1px dotted blue;}
ul,li{padding-left:15px !important;padding:0;margin:0;}
/*table, tr, td, p{margin:0;padding:0;}*/
img{margin-right:10px;}
img{width:50px;height:50px;}


Solution :

To vertically align an element to the top of a table cell, you can use the CSS vertical-align:top definition.

td {
    vertical-align:top;
}

Documentation

Working Example


    CSS Howto..

    How to apply CSS style when ID is taken?

    How to achieve this diagonal drop down effect with CSS?

    How do you stretch header, content & footer color across a page with everything being centered in a fixed width?

    How to add a play icon to Image on CSS

    How to make a resizable menu centered on the middle?

    R markdown: how to change style with internal css?

    How can I set the color of the border area around the page/post on my Wordpress Site

    How to access two Ids in one css selector

    How do I customize