我有一个带有超链接的图像,并且想在图像下方显示文本。
[编辑]
我的输出应该像在记分卡下一样,我需要看到一张图像(谷歌)及其下方的文本,而在仪表板下,我需要看到两张图像(亚马逊、微软)及其下方的文本。
下图是我所期待的
看图片 https://i.stack.imgur.com/0VAJF.jpg
下面是代码
<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/ 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)