valign vs text-align in HTML

问题

I can't figure out the difference between valign vs text-align in HTML in context with the following code:

    <table width="500" border="0">
  <tr>
        <td colspan="2" style="background-color:#FFA500;">
   <h1>Main Title of Web Page</h1>
   </td>
      </tr>

  <tr valign="top">
      <td style="background-color:#FFD700;width:100px;text-align:top;">
      <b>Menu</b><br />
    HTML<br />
      CSS<br />
  JavaScript
     </td>
   <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
      Content goes here</td>
    </tr>

   <tr>
     <td colspan="2" style="background-color:#FFA500;text-align:center;">
     Copyright © 2012</td>
   </tr>
   </table>

回答1:

The proper values for text-align are left|right|center|justify as it is horizontal, while the valign is vertical so it's top|middle|bottom|baseline. You can also use inherit on both.

Plus, text-align is css while valign is an html attribute. I think align is the html equivalent to text-align, while vertical-align is equivalent to valign.

http://www.w3schools.com/cssref/pr_text_text-align.asp

http://www.w3schools.com/tags/att_td_valign.asp

If you switch text-align to "bottom", you'll notice it doesn't move as bottom isn't valid for text-align. The default (i think) is top. If you put "vertical-align:bottom" though, it will go to the bottom.

A simple web search will find you these answers...

回答2:

valign (html attribute) is equivalent of vertical-align in css

align (html attribute) is equivalent of text-align in css

html attribute versions are deprecated in favour of css

vertical-align positions block elements (e.g. div) vertically inside other block elements

text-align positions inline elements (e.g. span, default text) inside block elements horizontally

回答3:

The text-align is for horizontal aligning in CSS and styles, where vertical-align is for vertical alignment. Then we have align="center" valign="top" are the correspondant attributes in the HTML for the same purpose.

Read more about HTML and CSS, this is my suggestion.

回答4:

valign will vertically align all elements, whereas text-align is specifically for text.

回答5:

A value of top for text-align is not supported (only left | center | right | justify | start | end).. so it does not do what you expect it ...

The text-align MDN docs property is for horizontal align.

The vertical align you witness in your example is because of the valign="top" property of the tr element.

Look at your example without the valign at http://jsfiddle.net/gaby/PvtAU/ and you will notice this.

valign is only valid for tr MDN docs and td MDN docs elements, and is deprecated in html 4.01 and obsolete in html5.
Use vertical-align MDN docs instead..

回答6:

The value of text-align: top; is not valid css, text-align is horizontal not vertical. This is where valign="top" comes into play. Putting in valign="left" is not valid the same as text-align: top; is not valid. valign is vertical.

来源：https://stackoverflow.com/questions/8757170/valign-vs-text-align-in-html