Question

我有一个带超链接的图片，想要在图片下面显示文字。

[编辑] 我的输出应该像记分卡一样我需要看到一个图像（谷歌）及其下面的文字，在仪表板下，我需要看到两个图像（亚马逊，微软）及其下面的文字。

下图是我所期待的

以下是代码

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

{{1}}

＆＃13;

使用DIV而不是跨距.. Spans是Inline-Elements。 Div是块元素，它们使它们在另一个div下方对齐。

Answer 3

使用Div代替

范围的显示属性是内联

- 内联元素水平排列，如

内联内联内联

div的显示属性是块

- 块元素一个堆叠在另一个上面，就像块

一样

使用

但是如果您仍然愿意使用span，可以进行一些调整

在 span

br

或制作#Scorecards a span, #Dashboards a span{ display:block; }

这两种黑客将帮助您实现目标。

工作示例：https://jsfiddle.net/ishusupah/rknyddp0/

在图像下方显示文字

3 个答案: