HTML中的valign与text-align有何区别？

Question

在下面的代码中，我无法理解HTML中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>

- sandbox

Answer 1

valign (HTML 属性) 是 CSS 中 vertical-align 的等效属性

align (HTML 属性) 是 CSS 中 text-align 的等效属性

HTML 属性版本已过时，应使用 CSS

vertical-align 可以使块级元素（例如 div）在其他块级元素内垂直对齐

text-align 可以使行内元素（例如 span 和默认文本）在块级元素内水平对齐

- jenson-button-event

---

“vertical-align positions block elements” - 这是错误的说法。它可以垂直定位行内元素。 - Oleh Devua

Answer 2

text-align 的正确取值为 left|right|center|justify，它是水平方向的；而 valign 则是垂直方向的，其取值为 top|middle|bottom|baseline。你也可以在两者上使用 inherit。

此外，text-align 是 CSS 属性，而 valign 是 HTML 属性。我认为 align 是 HTML 中 text-align 的等效属性，而 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 的有效取值。默认值（我想）是 top。但是，如果你使用 "vertical-align:bottom"，它就会移到底部。

简单的网络搜索即可找到这些答案……

- craniumonempty

Answer 3

text-align属性用于水平对齐，而vertical-align属性用于垂直对齐。在HTML中，align="center"和valign="top"是相应的属性，用于实现相同的对齐功能。

建议阅读更多关于HTML和CSS的内容。

- Rolice

---

嗯，所以SO只适合专家吗？我认为更多的是这个问题可能已经被问了无数次，这让人们感到恼火。 - jenson-button-event

不，但这是关于HTML和CSS的通用问题，几乎可以在网上找到任何地方。尝试在Google中搜索align、valign、text-align、vertical-align。你肯定会在第一页上看到确切的定义。这里的想法是分享共同的问题和相应的解决方案，就我所知，而不是百科全书。 - Rolice

Answer 4

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

- Brissles

Answer 5

text-align 属性不支持 top 值（仅支持 left | center | right | justify | start | end），所以它不会产生你期望的效果。

text-align ^{MDN 文档} 属性是用于水平对齐的。

你在示例中看到的垂直对齐是由 tr 元素的 valign="top" 属性引起的。

去掉 http://jsfiddle.net/gaby/PvtAU/ 中的 valign，你会发现这一点。

valign 只适用于 tr ^{MDN 文档} 和 td ^{MDN 文档} 元素，在 html 4.01 中已被弃用，在 html5 中已过时。
请改用 vertical-align ^{MDN 文档}。

- Gabriele Petrioli

Answer 6

text-align: top; 的值不是有效的 CSS，text-align 是水平而不是垂直的。这就是 valign="top" 起作用的地方。输入 valign="left" 与输入 text-align: top; 不同，都是无效的。 valign 是垂直的。

- user1106352