4

我试图弄清楚将 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>
4

2 回答 2

13

该align属性是旧式“tag-soup”HTML，根据 W3 官方文档已弃用。更喜欢 CSS 样式，与

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

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

td.center {
    text-align: center;
}
于 2010-09-22T23:19:10.207 回答
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

于 2015-09-10T09:05:17.130 回答