html - align = "center"不适用于表格

Question

我有一张表格，我想在网页中间对齐。但是它卡在页面的左侧。这是我的代码:

<table class="tableOne" align="center">
    <tr >
        <img src='Images/Header.png' />
    </tr>
</table>

代码有什么问题？我只需要页面中间的表格。

Answer 1

不要使用 align="center"这不是一个标准的属性。您可以选择使用 CSS。

使用 margin:auto 将表格 在其容器中居中.

<style>
  .tableOne {
    margin:auto;
  }
</style>

要使表格单元格中的文本居中，请使用 text-align:center .

<style>
  .tableOne td {
    text-align:center;
  }
</style>

此外，您没有添加 <td>在<tr>里面.您应该始终确保表格单元格的内容在 <td> 范围内。所以你的 HTML 是有效的。

<table class="tableOne">
    <tr>
        <td>
            <img src='Images/Header.png' />
        </td>
    </tr>
</table>

---

附带说明一下，如果您只使用表格来使图像居中，则应该去掉表格。这可以用一个简单的 div 代替。

HTML

<div class="center-me">
    <img src='Images/Header.png' />
</div>

CSS

.center-me {
    text-align:center;
}