HTML中的valign与文本对齐答案

【问题标题】：valign vs text-align in HTMLHTML中的valign与文本对齐
【发布时间】：2012-01-06 11:30:55
【问题描述】：

我无法通过以下代码找出 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>

【问题讨论】：

标签： html css markup semantic-markup

【解决方案1】：

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

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

不推荐使用 html 属性版本以支持 css

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

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

【讨论】：

vertical-align positions block elements - 这是错误的说法。它垂直定位内联元素。

【解决方案2】：

另外，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”，您会注意到它不会移动，因为底部对于 text-align 无效。默认（我认为）是顶部。如果你放“vertical-align:bottom”，它会到底部。

一个简单的网络搜索就能找到这些答案...

【讨论】：

【解决方案3】：

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

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

【讨论】：

嗯，所以 SO 仅适用于专家？我认为更重要的是这个 Q 可能已经被问了无数次了
不，但是这个关于 HTML 和 CSS 的通用问题，您几乎可以在网络上的任何地方找到它。尝试在 Google 中搜索 align、valign、text-align、vertical-align。你肯定会在第一页看到确切的定义。据我所知，这里的想法是分享问题和各自的解决方案，而不是百科全书。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

text-align: top; 的值不是有效的 css，text-align 是水平的而不是垂直的。这就是valign="top" 发挥作用的地方。输入valign="left" 无效，就像text-align: top; 无效一样。 valign 是垂直的。

【讨论】：