如何将按钮内的图标和文本居中?

2023-12-23

如何将按钮内的图标和文本居中而不指定对齐项目的尺寸?

.ico {
  background: url(https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG);
  width: 32px;
  height: 32px;
  display: inline-block;
}
<button>
  <span class=ico></span>
  And some text
</button>

你可以加vertical-align: middle到班级ico。 小提琴在:https://jsfiddle.net/mnet4hn4/ https://jsfiddle.net/mnet4hn4/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将按钮内的图标和文本居中? 的相关文章

  • 链接到页面上的不同区域

    这似乎是一个愚蠢的问题 但是 所以我想做的是设置一个菜单部分 这样当用户单击该部分的标题时 它会将他们发送到页面上的特定位置 而无需向下滚动 我不完全确定这将如何运作或实现起来有多复杂 所以基本上我会 Menu 第一项 作为链接 第二项 作
  • Javascript 像素操作:这些不是我的颜色

    我知道类似的问题已经被问过好几次了 但我还没有找到我想要的东西 我正在将图像读入画布对象 在 JavaScript 中 并尝试操作一些特定的像素 例如 我正在寻找颜色 RGB 224 64 102 并尝试将其更改为其他颜色 我可以将灰度应用
  • 如何将CSS应用于iframe?

    我有一个简单的页面 其中有一些 iframe 部分 用于显示 RSS 链接 如何将主页中相同的 CSS 格式应用到 iframe 中显示的页面 Edit 这不能跨域工作 除非有适当的CORS 标头 https developer mozil
  • 使用CSS调整div以填充父容器的宽度[重复]

    这个问题在这里已经有答案了 我有一个容器宽度为 100 的页面 因此它是屏幕的整个宽度 我在网格结构中有几个 DIV 它们都有 float left 且没有设置宽度 只有 10px 的边距 有没有一种方法 使用 CSS 或 jQuery 让
  • 动态加载css的方法

    我很早就知道 您可以使用 addRule 和 insertRule 动态地将样式规则加载到页面中 具体取决于它是 IE 还是兼容标准的浏览器 但我刚刚发现 在 Chrome 上 一种更通用 对我来说 的方法效果很好 创建一个 style 元
  • 未捕获的ReferenceError:google未定义(索引):21初始化(Google Maps API)

    继续在控制台中收到此错误 Uncaught ReferenceError google is not Defined 已经做了一段时间了 但没有运气 非常感谢任何帮助 提前致谢
  • 欺骗或禁用页面可见性 API

    页面可见性 API https developer mozilla org en US docs Web Guide User experience Using the Page Visibility API开始普遍用于在选项卡未处于焦点时
  • 如何缩小aspx页面

    我正在开发一个基于网络的口袋妖怪在线 http www pokemoncraft com游戏 由于它是在线的 我想优化它以尽可能快地运行 我已经安装了 Firebug Page Speed 建议缩小我的 HTML 输出 我还使用 VS200
  • 处理重叠 SVG 图层中的鼠标事件

    我正在使用 d3 js 构建地图可视化 我正在为美国各州和县绘制填充多边形 县的 SVG 图层位于州图层下方 状态已填充 但填充不透明度设置为 0 我认为 需要填充来捕获点击事件 我想捕获州级的点击事件 但我想捕获县级的鼠标悬停事件 但是
  • 如何跨页面播放背景音乐

    我已经读过这个问题 我知道它只能用框架来完成 我真的不想要全站点 AJAX 如何在多个 HTML 页面上播放背景音频 https stackoverflow com questions 4210370 how to play a backg
  • HTML 5 视频:使用 javascript 播放多个“剪辑”

    我在 HTML 视频和 JavaScript 方面遇到问题 因此编写了一些简单的代码来演示 有一个视频包含三个 剪辑 全长五秒 显然 在现实世界中 它们要长得多 一个在 25 30 秒 一个在 55 60 秒 最后一个在 85 90 秒 我
  • 确定是否单击了 Google Chrome 打印预览中的打印/取消按钮

    我一直在使用下面的代码打印我的页面 window print 下图是 Google Chrome 浏览器中的打印预览的样子 它有两个主要按钮 print and cancel 我想知道用户是否点击了print or cancel纽扣 我所做
  • 通过修改 html 设置在 Web 表单上上传的默认文件名/目录

    我一直使用这个上传表单 并且每次都使用相同的文件名 我想知道是否有一种方法可以通过更改代码并在本地保存文件来设置表单中的文件名 如果有其他方法可以实现自动化 我也愿意 谢谢 这是来源
  • 单击

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我知道如何用 jquery 做到这一点 但我被 React 困住了 每当用户点击 div 时 我如何聚焦输入字段 你需要有一个onCl
  • 没有 jQuery 的纯 CSS 工具提示[重复]

    这个问题在这里已经有答案了 可能的重复 如何使用纯 CSS 创建 工具提示尾部 https stackoverflow com questions 5623072 how can i create a tooltip tail using
  • CSS:DIV 中的文本被截断

    我正在致力于集成一个 jQuery 插件 该插件会隐藏页面的某些部分 直到用户单击 喜欢按钮 Facebook 小部件的部分文本被切断 我已经尝试过 CSS 但无法让它完全显示 如果容器的宽度设置正确 还有什么可能导致文本被截断 例子 ht
  • 通过 javascript 从 获取点击坐标

    Example
  • 如何用CSS让物体移动?

    我在页面中间并排设置了两个图像 对象 我希望它们彼此移动 就好像它们将要碰撞一样 并在它们放置在每个图像旁边时停止 因此 对于右侧的对象 我编写了以下代码 认为该对象应该从左向右移动 但结果与我的预期相去甚远 是否可以通过过渡来做到这一点
  • 更改滚动条样式

    我们可以更改滚动条样式吗 我想在其上放置图像 而不是默认滚动条 No IE 允许更改某些滚动条元素的颜色 但其他浏览器 不 唯一的解决方案是使用自定义 JS 来实现这一点 但这总是比本机控件更丑陋和无用 看一眼 http www kelvi
  • 内联块元素和块元素之间的空间

    这两个 div 之间的空间是多少 我什至删除了 html 中的空白 div div div div http jsfiddle net 9thpuvwa http jsfiddle net 9thpuvwa 现在 如果第一个 div asd

随机推荐