html - 在图片下方显示文字

我有一个带有超链接的图像，并且想要在图像下方显示文本。

[编辑]
我的输出应类似于记分卡，我需要在其下方看到一个图像（谷歌），在仪表板下，我需要在其下方看到两个图像（amazon，microsoft）。

下图是我所期望的

see image

下面是代码

<div class="innerDiv" id="Scorecards">
  <br>Scorecards<br>
  <a href="https://google.com">
    <img class="imgCustom" id="menuImages" src="http://image.flaticon.com/icons/svg/44/44357.svg">
    <span>Google</span>
  </a>
</div>

<div class="innerDiv" id="Dashboards">
  <br>Dashboards<br>
  <a href="https://abc.aspx">
    <img class="imgCustom" id="menuImages" src="http://icons.iconarchive.com/icons/aha-soft/3d-social/64/Online-writing-icon.png">
    <span>Microsoft</span>
  </a>

  <a href="https://cde.aspx">
    <img class="imgCustom" id="menuImages" src="http://icons.iconarchive.com/icons/babasse/old-school/64/old-videos-icon.png">
    <span>Amazon</span>
  </a>
</div>

最佳答案

借助css进行想要的样式总是很不错的。尽管您可以通过多种选择来实现这一目标，但我认为这可以为您提供帮助。 https://jsfiddle.net/cc912995/

.link span {
  text-align: center;
  display:block;
}

.link {
  display: inline-block;
}

<div class="innerDiv" id="Scorecards">
<br>Scorecards<br>
<a href="https://google.com" class="link"><img class="imgCustom" id="menuImages" src="http://image.flaticon.com/icons/svg/44/44357.svg"><br><span>Google</span></a>
</div>

<div class="innerDiv" id="Dashboards">

<br>Dashboards<br>
<a href="https://abc.aspx" class="link">
<img class="imgCustom" id="menuImages" src="http://icons.iconarchive.com/icons/aha-soft/3d-social/64/Online-writing-icon.png"><br>
<span>Microsoft</span>
</a>

<a href="https://cde.aspx" class="link">
<img class="imgCustom" id="menuImages" src="http://icons.iconarchive.com/icons/babasse/old-school/64/old-videos-icon.png"><br>
<span>Amazon</span>
</a>
</div>

关于html - 在图片下方显示文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41724216/