在 img 标签下方显示一个标签 - Html

HTML是一种用于创建网页的标记语言，其中的标签可用于在网页上显示图像。有时候，我们可能需要在图像下方显示一个标签，以用于提供更多信息或者描述这个图像。本文将介绍如何使用HTML在标签下方显示一个标签。

方法一：使用CSS

可以使用CSS来创建一个容器，并将和标签放入其中。然后，将标签相对于容器进行定位，以使其出现在图像下方。

<div class="img-container">
  <img src="image.jpg" alt="Example Image">
  <div class="img-label">This is an example image</div>
</div>

<style>
  .img-container {
    position: relative;
    margin: auto;
    width: 50%;
  }

  .img-label {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

在上面的示例中，我们使用CSS创建了一个容器，并设置了容器的宽度和在页面中的位置。然后，我们在容器中放置了一个标签和一个

方法二：使用表格

另一种方法是使用HTML表格。可以将图像和标签放在表格的不同单元格中，并且使用 valign属性将标签垂直对齐到底部。

<table>
  <tr>
    <td>
      <img src="image.jpg" alt="Example Image">
    </td>
  </tr>
  <tr>
    <td valign="bottom">
      This is an example image
    </td>
  </tr>
</table>

在上面的示例中，我们使用HTML表格创建了两行。第一行包含了标签，第二行包含了标签。使用 valign属性将标签垂直对齐到单元格底部。

以上是两种将标签放置在标签下方的方法，可以根据情况选择方法。