html - 如何在 HTML 中将图像居中放在另一个图像上

Question

<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 层。

标签： htmlcss

Answer 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>