How to stop text from vertically centering in a table?


Tags: html,css,design,styles,center

Problem :

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.



Solution :

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

Demo


    CSS Howto..

    how to add same width on bootstrap dropdown menu item as parent item

    how to display navigationMenu div left side of the slider

    How to keep DIV from overlapping?

    How to change Fancybox preloader image?

    How can I control my

    styling in another styling?

    How to put my form on top of an image in css/html?

    How to apply css transform on iOS without using -webkit-transform?

    how to restore to original CSS

    How to check for text created by CSS?

    How to move content in ul to the center HTML + CSS

    How to limit jquery selectable to 1 tr and pass selected items to another page

    How to cut down HTTP request on js/css in laravel

    How to animate a div to move from end to end infinitely

    CSS: How to make the padding-right between li even?

    How to get the textarea to be same height as row

    How to make sure one css file does not override another one?

    How to refer to an anchor pane in css?

    How can I resize to fit html elements horizontally using CSS?

    100% width = viewport width. How to make it as wide as is page body instead?

    How can I modify my CSS to require a class instead of a “+ label”?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    How to fix layout to browser window without scroll

    How to locate element on a map by xpath or css selector

    CSS: How to create a background cutout using elements (not images)?

    How can I get my input text to move to the left up against the preceding label?

    How to position div so that it renders outside container

    how to choose what transform is applied first in css

    How to create a margin between two seperate divs?

    How to Add CSS Reference to .NET SyndicationFeed?

    how to edit the width of menu bar in dreamweaver