HTML Element Style How to - Align image caption on the image at left bottom corner








Question

We would like to know how to align image caption on the image at left bottom corner.

Answer


<!--   ww  w.j  a  va2  s .  co m-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img style="width: 350px; border: 3px solid black;"
    src="http://www.java2s.com/style/download.png">
  <div
    style="height: 20px; margin-top: -30px; margin-left: 10px; color: white;">
    <b>Image Caption</b>
  </div>
</body>
</html>

The code above is rendered as follows: