Question

我无法用以下代码弄清楚上下文中的valign与text-align之间的区别：

    <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>

Answer 1

valign（html属性）相当于css中的vertical-align

align（html属性）相当于css中的text-align

不推荐使用

html属性版本，而使用css

vertical-align将块元素（例如div）垂直放置在其他块元素

中

text-align在块元素内水平放置内联元素（例如span，默认文本）

Answer 2

text-align的正确值是水平的，而valig是垂直的，所以它是top | middle | bottom | baseline。您也可以在两者上使用inherit。

另外，text-align是css，而valign是html属性。我认为align是与text-align相当的html，而vertical-align相当于valign。

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

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

如果将text-align切换为“bottom”，您会注意到它不会移动，因为bottom对text-align无效。默认（我认为）是最高的。如果你把“vertical-align：bottom”放在底部，那么它将会显示在底部。

简单的网络搜索会找到这些答案......

Answer 3

text-align用于CSS和样式中的水平对齐，其中vertical-align用于垂直对齐。然后我们将align="center" valign="top"作为HTML中的对应属性用于相同目的。

详细了解 HTML 和 CSS ，这是我的建议。

Answer 4

valign将垂直对齐所有元素，而text-align专门用于文本。

Answer 5

不支持top text-align的值{仅left | center | right | justify | start | end ）..所以它没有按照您的预期... < / p>

text-align ^{MDN docs}属性用于水平对齐。

您在示例中看到的垂直对齐是因为valign="top"元素的tr属性。

在http://jsfiddle.net/gaby/PvtAU/处没有valign的情况下查看您的示例，您会注意到这一点。

valign仅对tr ^{MDN docs}和td ^{MDN docs}元素有效，在html 4.01中已弃用，在html5中已弃用。
请改用vertical-align ^{MDN docs} ..

Answer 6

text-align: top;的值无效css，text-align水平而非垂直。这是valign="top"发挥作用的地方。放入valign="left"无效，text-align: top;无效。 valign是垂直的。

valign与HTML中的text-align

6 个答案: