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

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

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

  • div 在显示内的定位:IE 10 中的表格单元格

    试图理解为什么 IE9 10 会因为 IE7 8 FF WK 都按预期渲染的内容而感到窒息 有什么技巧可以让 IE 9 10 正确尊重 表格单元格 的固有高度 重要提示 由于多种原因 我无法在 单元格 div 上使用 height 100
  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • PyCharm 中有 HTML 块 {%%} 的快捷方式吗?

    我正在使用 HTML 块 例如 block content 经常使用 但必须输入括号和百分比符号很麻烦 有没有捷径或其他方法可以自动执行此操作 到目前为止我刚刚发现这个 PyCharm 中有插入 的快捷方式吗 https stackover
  • IE7 显示问题:菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m
  • 使用 CSS 的平行四边形导航背景

    我正在尝试创建此导航菜单 绿色突出显示是活动页面 灰色是悬停状态 我可以使用以下 CSS 制作平行四边形 ul nav li a text decoration none padding 4px 10px border radius 3px
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 如何检测浏览器是否支持自定义元素

    我正在查看 Modernizr 它应该有助于功能检测 这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容 但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素 如果不是 Modernizr 我如
  • 为什么自关闭 iframe 标签会阻止显示更多 DOM 元素?

    在 Firefox 和 Safari 上 以下代码仅显示第一个 iframe 而添加结束标签可以解决问题 我不明白为什么它不起作用 当使用 DOMParser 解析第二个示例时 它无论如何都会转换为自关闭 iframe 在这里小提琴 htt
  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
  • 物化模式覆盖整个页面(模式弹出窗口未带到前台)

    由于保密原因 我无法上传 Web UI 的屏幕截图 物化模态应该表现得像here http materializecss com modals html 但不幸的是 我的网站发生的情况是 包括模式在内的整个页面都是 深色背景 的一部分 模式
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • Schema.org 的常见问题解答页面

    我有一个常见问题解答页面 我想用更好的 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