css picture alignment for my website

Question

Hello every one I am trying to align my photo links to my image converters, please take a look at my website https://www.tagadoor.com/converter/ you will see that oil painting is on top of emboss two link, this is my css

 <style>
.header {width: 98.6%;}
.pdf{border-radius : 11px;}
.pdf{height : 37px; width : 183px;}
.pdf{vertical-align : top; margin : 18px;}
.pdf{font-style: oblique; font-size: 80%; font-weight: bold;}
.pdf{cursor: pointer;}
.piper{
width: 170px;
}
div.pipy {
display: inline-block;
  -moz-column-count: 3;
  -webkit-column-count: 3;
   colum: 3;
  -webkit-column-gap: 43px;
  -moz-column-gap: 43px;
   column-gap: 43px;
}
div.pipy{
margin-top: 33px;

}

span {font-style: italic;}
 </style>

Also please tell me any suggestion you might have, all of the converters work if you want to test it out. Thank you so much for looking into this.

Answer 1

HTML5 introduced 'figures', and 'figcaptions' along with it. By wrapping an image and 'figcaption' within a 'figure' tag, you can keep them together. I like this method because it's clean and doesn't require any CSS. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure