如何将 HTML table 中的单元格数据与其上方单元格中的图像对齐？

Question

我正在制作一个网页，帮助我复习今年的计算机科学 class，在我制作的网页上，当您向下滚动时，有 2 张图片，标题和这些其他页面将包含的内容的描述。

但是，尽管我已将其居中对齐，但图像并未与所有文本一起居中显示。

我要问的是如何让 HTML table 中的每个数据单元格位于其上方数据单元格的中心。我会 post 一张照片，但我需要 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

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

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

text-alignCSS属性是继承的，所以你不必在每个子元素上重复它。

Answer 2

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

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

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

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

如何将 HTML table 中的单元格数据与其上方单元格中的图像对齐？

How do I align cell data in an HTML table with the image in the cell above it?

html

css

html-table

image

alignment