在图像下方显示文本

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

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

  • 编辑时可以在文本框控件内使用 Angular 的管道格式化程序吗?

    我已经声明了一种将大数字分成三位数组的格式 并像这样经常使用它 div Huge number i am huge make threesome div 现在 有一个对相应功能的请求 但在像这样的输入控件中实现
  • 将 Bootstrap 导航栏列表项包裹在居中的品牌图像周围

    我整晚都在搞乱这个问题 没有解决办法 我正在使用 bootstrap 2 32 对于 joomla 模板 尚不支持 BS3 并且我将拥有动态数量的列表项 我需要将列表项居中 但也同样包裹在中心 brand img 的左侧和右侧 我可以把它分
  • 在 Chrome 中显示输入 type=date-local 的秒数

    在谷歌浏览器中 如果我设置 type 输入的值datetime local包含秒的时间 其中秒值为 0 Chrome 决定不在输入中显示秒值 这意味着用户根本无法设置秒 例如 如果我将值设置为2013 10 24T20 36 01然后Chr
  • 带有图像的 Svg 在 Safari 中不显示

    在我的网站中 我嵌入了一些 svgs 它们在 Chrome Firefox IE 9 和 Safari 中似乎都工作得很好 然而 一旦 svg 中包含图像 safari 就不会渲染该图像 基于之前的类似主题 我尝试了以下内容 SVG 元素在
  • 使用 Node-sass 缩小 CSS

    我在 NodeJS 项目中使用 SCSS 并让我的脚本使用以下命令将所有单独的 SCSS 文件转换为单个 CSS 文件 node sass w public css scss style scss public css style css
  • 使用渐变获取颜色条中特定位置的颜色值

    我生成了一个带有 CSS3 样式的渐变颜色条 fiddle http jsfiddle net eDEWk 现在想要该颜色条中特定位置的颜色值 通过 x 和 y 坐标 据我所知 没有直接的方法可以做到这一点 我看到两个选择 在 JavaSc
  • 使用 jQuery 的 ASP.NET 中的模态表单

    我对 ASP NET 开发还比较陌生 到目前为止 我已经设法让事情变得简单 但我现在的需求有点复杂 到目前为止还没有得到太多乐趣 本质上我希望在单击按钮添加新用户时弹出一个模式表单 所以我发现这个在 jQuery 网站上 http jque
  • 当用户在 DIV 外部单击时,使用 jQuery 隐藏 DIV

    我正在使用这段代码 body click function form wrapper hide form wrapper click function event event stopPropagation 和这个HTML div clas
  • 不加载隐藏图像

    我的网站上有一堆隐藏图像 它们的容器 DIV 具有 style display none 根据用户的操作 某些图像可能会通过 JavaScript 显示 问题是我的所有图像都是在打开页面时加载的 我想通过仅加载最终可见的图像来减轻服务器的压
  • JavaFX HTMLEditor - 插入图像功能

    我正在使用 JavaFX 集成的 HTMLEditor 它具有的所有功能都很好 但我还需要具有在 HTML 文本中插入图像的功能 你知道我可以使用的一些来源吗 或者其他一些可以在 JavaFX 中使用的 HTML WYSIWYG 编辑器并且
  • 通过 jquery 设置 type="file" 的值[重复]

    这个问题在这里已经有答案了 Note 下面的答案反映了 2009 年旧版浏览器的状态 现在 您实际上可以在 2017 年使用 JavaScript 动态 编程地设置文件输入元素的值 有关详细信息以及演示 请参阅此问题中的答案 如何以编程方式
  • 如何使 superfish 下拉菜单响应式?

    我正在使用带有骨架框架的 superfish 下拉菜单 我希望它也能在手机上运行 默认情况下 它显示下拉项目 但它将鼠标悬停在其下方的项目上 我想以某种方式拥有它 以便它将父项推到它下面 有什么解决办法吗 这是一个更好的答案 我能够将 Su
  • 使用 CSS 让图像位于文本后面并使其保持在中心位置

    我正在创建一个网页 其中有一个要放置在中心的图像 在该图像的顶部 我想要有输入框 标签和提交按钮 我正在尝试使用这个CSS img center z index 1 但这不起作用 当我将代码更改为 img center position a
  • Bootstrap 4 列和行产生不需要的填充[重复]

    这个问题在这里已经有答案了 我正在尝试使用 bootstrap 创建列和行来放置我的图像 但是在图像周围添加了太多的填充 这导致我的图像看起来不像设计 这就是我构建 HTML 的方式
  • 通过 HTML 将复杂变量传递给 javascript 的正确方法

    我试图摆脱使用 PHP 的 htmlentities 但我在这里停止了 但后来我想 我不做替换和检查特殊字符 而是只 JSON 整个对象 这提供了一个非常不受欢迎的结果 其中包含大量双引号 那么我应该怎么做呢 我应该为每个图像分配一个数字唯
  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • 启用 NET 的开始标记需要 SHORTTAG YES

    尝试对我的 aspx 的输出进行 W3C 验证 VB NET 2008 Framework 3 我收到这个警告 警告第 6 行第 76 列 启用 NET 的开始标记需要 SHORTTAG 是的 该序列可以至少以两种不同的方式解释 方式 具体
  • 无需源代码即可部署网站

    我用php开发了网站 我想在没有源代码的情况下部署它 用php可以吗 我可以将网站代码转换为某种中间形式然后进行部署吗 您可以使用 Zend Guard 来编码您的代码 这样它就无法被逆向工程 http www zend com en pr
  • 头部带有脚本的 Nodejs EJS 部分

    我正在使用 EJS 从 Nodejs 服务器渲染和服务器 HTML 页面 我包含的一些部分在头部引用了脚本和样式表 但这会导致客户端对同一文件发出多个请求 例如 如果父视图也包含该文件 例如
  • 如何在 React Native 中做最后一个子选择器?

    我使用Scrollview 里面有3个视图 我在它们之间留了一个间隙 例如 marginRight 5 但我不希望在最后一个视图中出现这种间隙 这就是为什么我需要这种东西 你能帮助我吗 应用这个你就可以实现你在寻找什么 const styl

随机推荐