如何将 HTML 表格中的单元格数据与其上方单元格中的图像对齐？ [关闭]

Question

我正在制作一个网页，以帮助我修改今年的计算机科学课程，并且在我制作的网页上，当您向下滚动时，会有 2 张图片，其中包含标题和描述这些其他内容的内容页面将包括。

但是，尽管我已将其居中对齐，但图像并没有出现在所有文本的中心。

我要问的是如何让 HTML 表格中的每个数据单元格成为其上方数据单元格的中心。我会发布一张图片，但我需要 10 声望。这是我的代码：

<div class="Main">
  <br />
  <br />
  <table>
    <tr>
      <td>
        <a href="">
          <input type="image" id="Topics" position:absolute style="height:px; width:px;" src="./CSImages/Topics.PNG">
        </a>
      </td>
      <td>
        <a href="">
          <input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/Languages.PNG">
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <H2 align=c enter>Topics</h2> 
      </td>
      <td>
        <H2 align=c enter>Languages</H2>
      </td>

    </tr>
    <tr>
      <td>Here you will find Edexcel specification topics, it ranges from binary to compression to encryption</td>
      <td>Here you will find a few of the main computer languages used in computing today, such as; Python, C#, HTML and plenty more...</td>
    </tr>
  </table>
</div>

感谢您的帮助！

Answer 1

首先，样式属性不再在 HTML 中使用。这被认为是不好的做法，因为 HTML 应该描述页面的内容，而不是其外观。这意味着不应使用 color、border 或 align 等属性。相反，样式是用 CSS 完成的。现在，在您的页面中，您正在同时做一些事情。但它不起作用的原因仅仅是因为你在中间放了一个空格，甚至没有使用“引号”。而你只在 h2 元素上写了这个。

无论如何，你应该按照 Naraw Games 所说的去做。 CSS text-align 是你所需要的。

你也有这个：
position:absolute style="height:px; width:px;"
这没有任何意义。您可能打算将位置代码放在样式属性中，如果您不调整高度和宽度的大小，我不明白您为什么将height:px; width:px; 留在其中。事实上，整个部分都是无用的。

我不知道您为什么要为图像使用输入元素。你可能有你的理由，但是为什么用 元素包装输入呢？我不知道。在任何情况下，img 和 input 标签都是自动关闭的，所以你应该在末尾加上一个斜线，像这样：<tagname />。大多数浏览器会尝试修复该错误，但您不会看到差异，但不关闭它们是不好的做法。你的元素也应该是小写的。你写的是<H2>而不是<h2>。

Answer 2

您的意思是要使所有文本和图片居中？您只需将 td { text-align: center; } 添加到您的 CSS 文件中即可。

如果您想使用内联样式，只需将style="text-align: center;" 添加到<table> 元素即可。

text-align CSS 属性是继承的，因此您不必在每个子元素上重复它。