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;
}

Answer 2

@Juhana在评论中写道，问题的原因是缺少<td>标记。你需要写

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

tr可能只有th和td元素作为子元素。这不仅仅是一个正式的要求。浏览器解析 HTML，这样如果您尝试在那里有任何其他小孩（即，任何内容未放置在th或td内），它将被处理，就好像它一样在桌子前面。 （您可以在浏览器中使用开发人员工具F12查看此内容并检查文档树。）

如果您只想将图像居中，则比单细胞表更简单，例如：只有<center><img ...></center>以及更优雅的方式，例如HTML中的<img ... class=figure>和CSS中的.figure { text-align: center }