HTML在图像标记下对齐文本

Question

如何在div中的图像下方对齐图形标题？我不必是标题标签。任何将对齐文本的标记都可以。我尝试过以下但是它会扭曲我div中的所有内容：

  <div class="col-md-2">
      <span>
        <img src="/images/<%= record.logo %>" alt=<% record.logo %> height="80" width="80"  onerror="this.style.display='none'" />
        <figure><%= record.randomtext%> - <%= record.randomdate%></figure>
      </span>
 </div>

Answer 1

你可以像这样使用figure

<div>
<figure>
  <img src="image_url" width="100" height="100">
  <figcaption>Fig.1 - Something.</figcaption>
</figure>
</div>

Answer 2

利用<figure>和<figcaption>。

注意使用figcaption时，理想情况下它应该是figure结构中的第一个或最后一个元素。

 <div class="col-md-2">
      <figure>
           <img src="/images/<%= record.logo %>" alt=<% record.logo %> height="80" width="80"  onerror="this.style.display='none'" >
         <figcaption>
            <%= record.randomtext%> - <%= record.randomdate%>
         <figcaption>
     </figure>
 </div>

然后在您的CSS中，您可以执行以下操作：

figure, figcaption {
   display:block } 

figure {
   width:100% }

figcaption {
   text-align:center }