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 can I add a border to the right side of this object?

    Normalize.css how to use it?

    How can I vertically center this css/javascript based modal dialog?

    How to apply CSS properties of one class in another

    How to put padding on SPAN only when not empty

    How to add an image to a transparent box using css

    How would I do a two finger drag with javascript/jquery?

    How to see the print media CSS in Firebug?

    How to avoid text go below the thumbnail with css

    How do I change the css gradient values when my progress bar value changes?

    How can I get some padding between these form boxes?

    How to set a CSS selector for links ( a Tag ) for a Class

    CSS: How to create a lines or dots over a background image? [closed]

    How to collectively center several divs within a parent div?

    How to change a span to look like a pre with CSS?

    How to apply zoom transition on label and textbox simultaneously in HTML/CSS?

    How can I prevent my li's from going below my menu even if there is no room?

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    how to make cross browser css ellipsis?

    QuickSand Script not showing correctly in IE 7

    How to use CSS selector to find link by text

    How to keep the link color on CSS buttons as one color when changing default link colors?

    How to restore WordPress theme style,css from caches on internet

    How to style
  • s inside
      as a table with custom height?
  • How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    How to target items

    How to toggle a div to slide up and down

    CKEditor — How can I add document-specific CSS styles

    How to change the included CSS files on button click?

    How to add offset border to image of unknown size?