valign vs text-align in HTML
Solution 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...
Solution 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
Solution 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.
sandbox
Updated on November 30, 2020Comments
-
sandbox over 3 years
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>