我的网站的 css 图片对齐

Question

大家好，我正在尝试将我的照片链接与我的图像转换器对齐，请查看我的网站https://www.tagadoor.com/converter/ 你会看到油画在浮雕两个链接的顶部，这是我的 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>

另外，请告诉我您可能有的任何建议，如果您想测试一下，所有转换器都可以工作。非常感谢您对此进行调查。

Answer 1

HTML5 引入了“figures”和“figcaptions”。通过将图像和“figcaption”包装在“figure”标签中，您可以将它们放在一起。我喜欢这种方法，因为它很干净并且不需要任何 CSS。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure