6

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

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

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

4

2 回答 2

12

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

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

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

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

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

另外，您没有<td>在<tr>. 您应该始终确保表格单元格的内容在 a 内，<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;
}
于 2013-10-26T21:06:01.893 回答
-2

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

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

Atr可能只有th和td元素作为子元素。这不仅仅是形式上的要求。浏览器解析HTML，因此如果您尝试在其中添加任何其他子项（即，任何未放置在 ath或中的内容td），它将被处理，就好像它在表格之前一样。（您可以在浏览器中使用开发人员工具 F12 来查看此内容并检查文档树。）

如果您只想使图像居中，则有比单格表格更简单的方法，例如<center><img ...></center>，还有更优雅的方法，例如<img ... class=figure>HTML 和.figure { text-align: center }CSS

于 2013-10-26T21:56:26.657 回答