在图像下方显示文本

2024-02-14

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

[编辑] 我的输出应该像在记分卡下一样,我需要看到一张图像(谷歌)及其下方的文本,而在仪表板下,我需要看到两张图像(亚马逊、微软)及其下方的文本。

下图是我所期待的

看图片 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(使用前将#替换为@)

在图像下方显示文本 的相关文章

  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • jQuery 生成 div 和碰撞检测

    所以我的学校作业项目快要结束了 我只是错过了两件我似乎无法弄清楚的主要事情 1 如何生成具有随机位置的间隙的管道障碍物 以便鸟可以飞过 尝试使用一个函数来更改间隙位置的管道 div 的 css right attr 并在以下情况下移除管道它
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • 仅 IE9_有时_会忽略

    我们正在开发一个大量使用 这是典型的 TYPO3 网站 该网站是在子目录中开发的 稍后将被重新定位到顶级目录 因此我们无法轻易删除 我们的客户告诉我们 有时当她浏览新页面时 她得到的页面内容没有应用布局 我们对此进行了调试 仅在 IE9 中
  • 我可以在元标记中使用 HTML 字符实体吗?

    我有一个有两种语言的网站 英语和中文 在使用 UTF 8 字符集的英文主页中 我有 例如 这出现在搜索结果中 我想将其更改为 在哪里 20013 25991 是 中文 的 ISO 实体 搜索结果中会显示为 中文 吗 我无法将 中文 直接粘贴
  • 如何在数据表中colspan rowspan?

    I am trying to use colspan and rowspan attributes with jQuery Datatables where a product sku can span 2 rows and a week
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 来自 HTML5 的 Phonegap Bonjour/Zeroconf 或 Websocket IP 发现

    我正在尝试实现一个 Phonegap HTML5 应用程序 该应用程序连接到 Websocket 服务器 在嵌入式设备中运行 也有 Bonjour 服务 以在家庭网络内交换数据 我想知道使用 Phonegap 检测服务器 IP 的最佳方法

随机推荐