在图像下方显示文本 [英] Display Text below image

问题描述

我有一张带有超链接的图片，我想在图片下方显示文字.

我的输出应该就像在记分卡下一样，我需要看到一张图片(谷歌)及其下方的文字，而在仪表板下，我需要看到两张图片(亚马逊、微软)及其下方的文字.

下图是我所期待的

见图片

下面是代码

<br>记分卡<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 class="innerDiv" id="仪表板"><br>仪表板<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>微软</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>亚马逊</span></a>

解决方案

借助 css 来做你想做的样式总是好的.虽然您可能有很多选择来实现这一结果，但我认为这里有一个可以帮助您.https://jsfiddle.net/cc912995/

.link span {文本对齐:居中；显示:块；}.关联 {显示:内联块；}

<br>记分卡<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 class="innerDiv" id="仪表板"><br>仪表板<br><img class="imgCustom" id="menuImages" src="http://icons.iconarchive.com/icons/aha-soft/3d-social/64/Online-writing-icon.png"><br><span>微软</span></a><img class="imgCustom" id="menuImages" src="http://icons.iconarchive.com/icons/babasse/old-school/64/old-videos-icon.png"><br><span>亚马逊</span></a>

I have an image with a hyperlink and would like to display the text below the image.

[Edit] My output should be like under scorecards I need to see one image(google) with its text below it and under Dashboard, I need to see two images(amazon,microsoft) with its text below it.

Below image is the what I am expecting

see image

Below is the code

<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>

解决方案

Its always good to take help of css to do the stylings that you want to make. While there might be many options for you to do achieve this result, here is one that I think will help you. 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>

这篇关于在图像下方显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！