How to stop text from vertically centering in a table?

Question

Here is the html code that makes the table:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div class="profile">
        <img src="http://www.teleread.com/wpcontent/uploads/2009/05/image18.png" />
      </div>
    </td>
    <td>Hello</td>
  </tr>
</table>

Here is the css:

.profile img {
    width: 120px;
    height: 125px;
    float: left;
    margin-right: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    border: 1px #cc1212 solid;
    clear: both;
}

Here is the code in action on jsfiddle:

http://jsfiddle.net/Yeqnn/

THE ISSUE: The word "Hello" is vertically centered in the right column

How do I fix this? BTW, the image has to be in the table and floated left to work with my current theme... any ideas, if so drop an answer plz.

Answer 1

Simply put vertical-align: top; on your <td> elements.

Demo