Показать текст ниже изображения

Question

У меня есть изображение с гиперссылкой и вы хотите отобразить текст под изображением.

[Редактировать] Мой вывод должен быть похож на оценочные карточки Мне нужно увидеть одно изображение (google) с его текстом под ним и под панелью инструментов, мне нужно увидеть два изображения (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>

Answer 1

Всегда полезно помочь 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>

Answer 2

<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"><div>Google</div></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"><div>Microsoft</div></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"><div>Amazon</div></a> 
 
</div>

Используйте DIV вместо пролетов. Пространства - это встроенные элементы. Divs являются блочными элементами, что делает их выравниванием ниже другого div.

Answer 3

Используйте Див вместо того, чтобы охватывать

Дисплей свойство пролете инлайн

- линейные элементы выстраиваются по горизонтали, как, как

Inline Inline Inline

Дисплей свойство DIV является блок

- Блок элементов стека один на другой, как, как блоки

Использование более

, но если вы по-прежнему готовы использовать срок есть некоторые хитрости, вы можете применить

1. использование бр перед тем пролета
2. или сделать #Scorecards a span, #Dashboards a span{ display:block; }

оба писаки помогут вам достичь вашей цели.

рабочий пример: https://jsfiddle.net/ishusupah/rknyddp0/