将文本置于圆形按钮上居中

2024-05-09

我想创建一个按钮圆形链接,其中包含文本,但我在将文本置于圆形按钮内居中时遇到问题。行高太大。对这个问题有什么建议吗?

这是代码:https://jsfiddle.net/hma443rL/ https://jsfiddle.net/hma443rL/

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  line-height: 2.3;
  vertical-align:middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}
<a href="" class="btn btn-donate">
  Donate <span>Us</span>
</a>

我正在尝试创建一个这样的按钮


Flexbox 可以做到这一点:

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 149px;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color: white;
  font-weight: bold;
  text-decoration: none
}
<a href="" class="btn btn-donate">Donate <span>Here</span></a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将文本置于圆形按钮上居中 的相关文章

  • Javascript 播放声音性能重吗?

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou
  • 如何在文本区域中使用除“文本插入符号”之外的透明字体?

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • 如何通过单击图像预览上的“x”从文件输入中删除图像?

    我目前有一个文件输入 一旦用户上传图像 就会显示图像预览 在图像预览上 有一个 x 可以从列表中删除图像预览 单击此 x 后 有什么方法可以从输入中的文件集中删除图像吗
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • iOS7 中“-webkit-overflow-scrolling: touch” 最初的屏幕外元素被破坏

    既然转基因种子已经发布了 我们现在可以谈谈了 看起来 iOS7 中的 webkit overflow scrolling touch 已损坏 最初不在屏幕上的元素的触摸事件不会触发 或者在某些情况下只是不可靠 这是一个例子
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显

随机推荐

  • 没有@Id的休眠/持久化

    我有一个数据库视图 它生成的结果集没有真正的主键 我想使用 Hibernate Persistence 将此结果集映射到 Java 对象 当然 因为没有PK 所以我不能用 Id 部署时 Hibernate 抱怨缺少 Id 我该如何解决这个问
  • 如何使用 javascript 从 UUID v1 (TimeUUID) 中提取时间戳?

    我使用 Cassandra DB 和 Nodejs 的 Helenus 模块来操作它 我有一些包含 TimeUUID 列的行 如何在javascript中从TimeUUID获取时间戳 这个库 UUID 至今 https github com
  • PDOException SQLSTATE[HY000] [2002] 我的本地计算机上的连接超时

    最近我从服务器导入了代码 但本地代码无法连接到远程 mysql 数据库 所以我有两个问题 我可以访问我的远程数据库吗 如果是 为什么我的代码不起作用 如果没有 有没有办法绕过这个问题 我不想复制在本地计算机上运行的 mysql 数据库 我的
  • 可以在不填充数据的情况下创建 BigQuery 表/架构吗?

    是否可以在不先用数据填充的情况下创建表模式 最好使用 Google 的 python 客户端 谷歌的文档似乎没有提供明确的是或否的答案 他们建议创建一个表 https cloud google com bigquery docs table
  • 如何刷新幻灯片放映中的活动幻灯片?

    基于我的最后一个问题 https stackoverflow com questions 14503054 change the image of an image shape我得到了正确的代码来更改形状的图像 不幸的是 这不会更新活动演示
  • Windows 内存映射文件

    我正在尝试研究 Windows 内核在内存映射文件 虚拟内存方面的行为 具体来说 我感兴趣的是确定内存映射文件的内容 由 Windows 刷新到磁盘的频率以及 Windows 使用什么标准来决定是时候这样做 我在网上做了一些研究 除了 MS
  • Django 找不到记录器“城市”的处理程序

    我正在尝试设置 Django Citieshttps github com coderholic django cities https github com coderholic django cities使用以下命令 sudo pyth
  • 文本末尾的空格在右对齐 UITextField 中不可见

    我有一个右对齐的UITextField 最初编辑时 文本末尾不会出现空格 我用这个解决了this https stackoverflow com q 19569688 1971013 替换 与不间断的 u00a0 然而 上面仅在编辑文本字段
  • 在初始化程序中重新加载命名空间常量

    今天遇到一个有趣的情况 我不确定如何解决 给定一个带有初始化器的 Rails 应用程序 file config initializers integrations rb Integrations CONFIGS key gt value f
  • Intel 64 和 IA-32 上的 MESI 有何意义

    MESI 的要点是保留共享内存系统的概念 然而 对于存储缓冲区 事情就变得复杂了 一旦数据到达 MESI 实现的缓存 下游内存就会保持一致 然而 在此之前 每个核心可能对内存位置 X 中的内容存在分歧 具体取决于每个核心的本地存储缓冲区中的
  • 如何使用 JDA 在 Discord 服务器(不是用户/机器人 DM)中创建私有频道:Java Discord API

    我试图让机器人在公会中创建一个私人频道 但在 JDA 文档中找不到任何允许这种情况发生的内容 调用时返回的 ChannelActioncreateTextChannel 在返回中明确将文本作为通道类型 return new ChannelA
  • 如何获取列中每个不同值的计数? [复制]

    这个问题在这里已经有答案了 我有一个名为 posts 的 SQL 表 如下所示 id category 1 3 2 1 3 4 4 2 5 1 6 1 7 2 每个类别编号对应一个类别 我将如何计算每个类别出现在帖子中的次数一条 SQL 查
  • 除法的时间复杂度是多少?

    我使用除法算法 根据https en wikipedia org wiki Computational complexity of mathematical operations https en wikipedia org wiki Co
  • iPython 笔记本上的内联数学模式

    在 iPython 笔记本中 我如何编写数学公式 例如r 2在一行中 乳胶词汇中的内联数学模式 IE 打印公式的时候可以不换行吗 如果像在 LaTeX 中一样 它应该是 r 2 但它不起作用 感谢您的帮助 在 Markdown 单元格中 您
  • 如何编辑 Mailchimp 自动化电子邮件的纯文本版本?

    我已经使用 Mailchimp 运行自动化工作流程一段时间了 其中有一个简单的欢迎新闻通讯 自动化电子邮件编辑器仅允许我编辑电子邮件的 HTML 版本 并自动生成基于文本的版本 但是 它仅在首次创建电子邮件时生成纯文本版本 从那时起 我已经
  • JKS、BKS 和 PKCS12 文件格式

    我正在设置一个无头服务器 该服务器使用用户提供的数据 JS CSS HTML 密钥库 为 Android 构建 Phonegap 混合应用程序 我想进行一些基本的客户端检查 以确保上传的密钥库有效 对于 JKS 文件 我发现可以通过确保提供
  • Excel 2013 COM API 在服务帐户下挂起 ExportAsFixedFormat

    我有一个 NET Windows 服务 它调用 Excel 2013 COM API 以在 PDF 上导出 Excel 文档 我已尝试使用在两个不同域帐户下运行的 Windows 服务来执行此代码 这两个帐户都是运行代码的计算机上的本地管理
  • Matplotlib:imshow 中 set_data 对绘图没有影响

    我有一个奇怪的错误 没有你的帮助我无法修复 当我设置图像后imshow在 matplotlib 中 即使我用方法更改它 它也始终保持不变set data 看看这个例子 import numpy as np from matplotlib i
  • GUI设计技术增强用户体验[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 将文本置于圆形按钮上居中

    我想创建一个按钮圆形链接 其中包含文本 但我在将文本置于圆形按钮内居中时遇到问题 行高太大 对这个问题有什么建议吗 这是代码 https jsfiddle net hma443rL https jsfiddle net hma443rL b