如何在 HTML 中将图像居中在另一个图像上 [重复]

【问题标题】：How to center an image on another image in HTML [duplicate]如何在 HTML 中将图像居中在另一个图像上 [重复]
【发布时间】：2023-04-06 00:35:01
【问题描述】：

<tr>
    <td style='text-align: center;'>    
        <img style='height: 50px;width:50px;' src='./images/01.png' >       
        <img style='height: 15px;width:15px;'src='./images/02.png' >    
    </td> 
</tr>

如何将 02.png 定位到 01.png 的中心？ 1层。

【问题讨论】：

stackoverflow.com/questions/18556157/… 你可以在这里找到答案。

标签： html css

【解决方案1】：

您可以在父元素（td 元素）中使用相对位置，在图像 2 样式中使用绝对位置。

#col {
  position: relative;
}

#img-1 {
  width: 50px;
  height: 50px;
}

#img-2 {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  top: 14px;
}

<table>
  <tr>
    <td id="col">
      <img id="img-1" src="img-1.jpg">
      <img id="img-2" src="img-2.jpg">
    </td>
  </tr>
</table>

【讨论】：