How to center an image on another image in 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>

How can I position the 02.png to the center of the 01.png? For 1 layer.

Answer 1

You can use position relative in parent (td element) and position absolute in image 2 style.

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