在图像下提供字幕

时间:2017-02-20 04:04:39

标签: html css

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

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

   <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

2 个答案:

答案 0 :(得分:0)

像这样?运行代码

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

希望它能帮到你

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