Question

我需要在每张图片下添加字幕。我尝试使用

标签并使用了标签，但我无法获得所需的结果

   <a href="http://www.sportshub.com.sg/Venues/Pages/OCBC-Aquatic-Centre/aqua-classes.aspx">
  <img style=" float:left; display:inline; border-radius:50%;"  src="d2.jpg" width="350" height="200" alt="bbc news special" hspace="30"/>
  </a>



   <a href="http://www.sportshub.com.sg/community/Pages/ecorider/ecorider.aspx">
  <img style=" float:left; display:inline; border-radius:50%;"  src="d3.jpg" width="350" height="200" alt="bbc news special" hspace="30"/>
  </a>strong text

Answer 1

像这样？运行代码

＆＃13;

.text {position:relative;text-align:center;}
.images{display:inline-block;margin-top:10px;}

＆＃13;

 <div class="images">
  <a href="http://www.sportshub.com.sg/Venues/Pages/OCBC-Aquatic-Centre/aqua-classes.aspx">
  <img style=" float:left; display:inline; border-radius:50%;"  src="d2.jpg" width="350" height="200" alt="bbc news special" hspace=""/>
  </a>
  <div class="text">
  Strong Text
  </div>
 </div>
 
  <div class="images">
  <a href="http://www.sportshub.com.sg/Venues/Pages/OCBC-Aquatic-Centre/aqua-classes.aspx">
  <img style=" float:left; display:inline; border-radius:50%;"  src="d2.jpg" width="350" height="200" alt="bbc news special" hspace=""/>
  </a>
  <div class="text">
  Strong Text
  </div>
 </div>

＆＃13;

Answer 2

希望它能帮到你

HTML

<div>
    <img src='image1.jpg' alt='image1' />
    <span class="caption">Caption goes here</span>
</div>

<强> CSS

.caption {
  display: block;
  font-weight: bold;
  margin-top: 10px;
}

Live Demo

在图像下提供字幕

2 个答案: