“对齐”与“文本对齐”的正确用法是什么答案

【问题标题】：What is the correct usage of 'align' vs 'text-align'“对齐”与“文本对齐”的正确用法是什么
【发布时间】：2011-04-16 00:23:24
【问题描述】：

我试图找出在表格单元格上放置 align 属性与使用 text-align css 属性之间的区别。下面的代码显示了 IE 与其他的不同结果。在 IE 中，对齐最终对齐每个子子项，因此文本“测试”居中对齐，而在 FF/Webkit 中并非如此，它保持左对齐。正确的行为是什么？

<!DOCTYPE html>
<html>

 <head>
  <style>
   table { width: 60%; }
   table td { border: 1px solid black; }
  </style>
 </head>

 <body>
  <table>
   <tbody>
    <tr>
     <td align='center'>
      <table>
       <tbody>
        <tr>
         <td>test</td>
        </tr>
       </tbody>
      </table>
     </td>
    </tr>
   </tbody>
  </table>
 </body>

</html>

【问题讨论】：

这里有两个单独的问题。 css v. html 和 align v. text-align。答案包括第一个。

标签： alignment text-align

【解决方案1】：

align 属性是旧式“标签汤”HTML，deprecated according to an official W3 document。更喜欢 CSS 样式，就像

<td style="text-align: center;">
    <!-- Content -->
</td>

更好的是，给 TD 一个类名（例如，像“center”这样的语义类名）并在样式表中设置该样式：

td.center {
    text-align: center;
}

【讨论】：

【解决方案2】：

如果有块元素（例如：表格）作为子元素，CSS:text-align 和 HTMLElement.align 属性的工作方式不同，因此请谨慎替换。

请参阅下面的演示以供参考。

.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }

.CenterSelf { margin: auto }

.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }


.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }

<table class="Container" align="center">
    <tr><td>TABLE1</td></tr>
    <tr>
        <td>
            <p>This is a paragraph.</p>
            <table>
                <tr>
                    <td>This is a children table.</td>
                </tr>
            </table>
            <div>This is a div.</div>
        </td>
    </tr>
</table>
<hr />
<table class="Container" style="text-align: center">
    <tr><td>TABLE2</td></tr>
    <tr>
        <td>
            <p>This is a paragraph.</p>
            <table>
                <tr>
                    <td>This is a children table.</td>
                </tr>
            </table>
            <div>This is a div.</div>
        </td>
    </tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
    DIV1
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
    DIV2
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
    DIV3
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
    DIV4
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">TABLE</td>
        <td colspan="2">DIV</td>
    </tr>
    <tr>
        <td>Elements</td>
        <td>align="center"</td>
        <td>style=&quot;text-align: center&quot;</td>
        <td>align="center"</td>
        <td>style=&quot;text-align: center&quot;</td>
    </tr>
    <tr>
        <td>Self</td>
        <td>O</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
    </tr>
    <tr>
        <td>inline child</td>
        <td>X</td>
        <td>O</td>
        <td>O</td>
        <td>O</td>
    </tr>
    <tr>
        <td>inline child of inline child</td>
        <td>X</td>
        <td>O</td>
        <td>X</td>
        <td>O</td>
    </tr>
    <tr>
        <td>block child</td>
        <td>X</td>
        <td>X</td>
        <td>O</td>
        <td>X</td>
    </tr>
    <tr>
        <td>inline child of block child</td>
        <td>X</td>
        <td>O</td>
        <td>O</td>
        <td>O</td>
    </tr>
</table>
O: Centered
X: Not centered

【讨论】：