首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我将按钮的宽度和高度更改为小数字时,按钮中的内联图标不居中

当将按钮的宽度和高度更改为小数字时,按钮中的内联图标可能不居中的原因是按钮的样式设置不正确或者内联图标的样式设置不正确。

解决这个问题的方法有以下几种:

  1. 使用CSS样式调整按钮和内联图标的位置:可以通过设置按钮的display属性为flex,并使用justify-contentalign-items属性来居中按钮中的内联图标。例如:
代码语言:txt
复制
.button {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 调整内联图标的样式:如果使用的是字体图标或SVG图标作为内联图标,可以通过设置line-height属性来垂直居中图标。例如:
代码语言:txt
复制
.icon {
  line-height: 1;
}
  1. 调整按钮的尺寸和内联图标的大小:如果按钮的尺寸过小,可能导致内联图标无法居中。可以尝试增大按钮的尺寸或者减小内联图标的大小,使其能够居中显示。

总结起来,解决按钮中内联图标不居中的问题,可以通过调整按钮和内联图标的样式,包括使用CSS样式调整位置、调整内联图标的样式以及调整按钮和内联图标的尺寸等方法。具体的实现方式可以根据具体的开发需求和使用的前端框架来进行调整。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Figma技巧超全合集!40+隐藏技能!快收藏!(第一辑)

04.CMD后按数字键(改变不透明度) 选择一个元素并单击 cmd 按钮后,您可以通过单击 1 9 之间按钮来更改不透明度。(键 1 为 10%,键 9 为 90%)。你可能知道这一点。...您可以使用相同组合再次打开它。 11.Cmd + G: 对选定元素进行分组。 12.Cmd + Option + G:所选元素框在分组。有时在调整元素大小时使用框架而不是组,这样方便。...16.文本自动高度自动宽度 当我们想要调整文本框大小时,我们从右侧面板调整就可以了。特别是当我们选择复制粘贴文本,该文本将以其默认样式复制。...此时我们可以应用一个小技巧:我们可以通过双击文本框任意边缘文本从自动高度改为自动宽度。 17.快速定位元素 在大文件,不少元素很难在画布上找到。我们可以在左侧图层面板中找到它们。...单击左侧面板中元素旁边图标,该元素将出现在画布上并居中。 18.Cmd+Option + S 添加版本历史。Figma 已经自动添加了版本历史。

2.9K30

6详解AppBar小部件

AppBar 通常显示概括本页功能模块,例如图标标题,并且通常包含按钮或其他用户交互点。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最暗最亮50。...AppBar( backgroundColor: Colors.deepOrange[500], ), 图标主题 下面的代码图标的颜色更改为绿色,大小更改为36: AppBar( actionsIconTheme...工具栏高度不透明度 最后,我们有工具栏属性。工具栏包含文字,图标按钮其他任何公司前景,除了小部件,如ContainerImage。...布局添加小部件 如何为 AppBar 图标、文本、背景、高度、阴影颜色工具栏设置主题 所以我们有了!

16.4K10
  • 【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    390 x 44 像素 , 该父容器高度是 44 像素 ; 由于设备宽度不同 , 这里设置宽度 , 让宽度自适应即可 ; css 样式实例 : .search-btn { /* 左侧按钮布局...垂直居中 */ line-height: 44px; } 5、搜索栏盒子 搜索栏盒子 高度是 44 像素 , 宽度一定不要设置 , 让该盒子自适应自动缩放宽度 ; 该容器 , 只需要利用中间部分内容即可.../so/images/search/jd-sprites.png ; 这里涉及到精灵图进行缩放 , 重新测量精灵图缩放后 坐标位置 大小 ; 在 Fireworks 测量该精灵图大小为..., 在布局中放大镜图标为 18 x 15 像素 ; 这里精灵图中放大镜图标设置为 36 x 30 像素 , 比较好计算 ; 二倍精灵图处理方案 : 在 Firework , 精灵图缩小一半 ;...在缩小一半精灵图中测量坐标 ; 代码 background-size 缩小一半 , 也就是精灵图缩小一半 ; 最终测量后 , 在缩小一半精灵图中 , 放大镜图标的左上角在 81, 0 坐标位置

    2K30

    客户端开发(Electron)认识窗口

    窗口(BrowserWindow)常见属性: 控制窗口标题栏、菜单栏 title 默认窗口标题 icon 当' iconType '为' custom '使用图标 frame...y 窗口距离屏幕顶部距离 center 窗口是否居中显示 movable 窗口是否可移动 控制窗口尺寸: width 窗口宽度(像素),默认800 height 窗口高度...(像素),默认600 minWidth 窗口最小宽度 minHeight 窗口最小高度 maxWidth 窗口最大宽度 maxHeight 窗口最大高度 resizable 窗口是否支持缩放...属性且设置值为false,如下图: 在VueApp.vue通过html标签来绘制我们标题栏,绘制后结果如下图所示: 为标题栏按钮增加事件: 按钮事件调用函数定义均与Vue...监听到窗口拖动缩放后,我们可以用来记录窗口信息: 恢复窗口信息代码如下: 当我们修改主进程代码并服务自动重启后你会发现窗口会先回到居中位置再移动到保存窗口状态位置,

    5.2K60

    1小,不会代码我如何完成 网易云音乐 大作业网页制作?(IVX 第2篇)

    1_bit:这个时候我们可以把这一行高度改为 80px,再把图片和文本框高度改为 80px。 1_bit:当然图片高度也要同样去设置高度。 小媛:你文本为什么会上下对齐?...我们将之前创建行重命名为 logo标题,并且拖拽到新创建,设置新创建高度为 80px,背景颜色为 #242424。 小媛:好了。...1_bit:然后这个行垂直对其更改为居中,这样就可以上下居中显示了,当然也要更改一下搜索框文本为 音乐/视频/电台/用户。 小媛:解决。...还需要设置这一个轮播图行高度为 包裹,这样就可以刚好包裹内容,从而不需要设置其高度了。 小媛:那两个按钮怎么搞呢? 1_bit:我们第一步应该给这个行设置垂直居中,这样按钮就下来了。...1_bit:下一步只需要设置背景颜色为当前图片接近颜色,再把当前按钮高度设置成 100% ,调整图标大小,就可以了。这样就可以占据了整个屏幕。

    1.9K30

    【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 垂直居中对齐 )

    ; 4、二倍精灵图设置 下图中 放大镜图片 头像图标 都定义在精灵图中 , 二倍精灵图设置步骤 : 缩小精灵图 : 在 Firework , 精灵图缩小一半 ; 测量坐标 : 在缩小一半精灵图中测量坐标...*/ margin: 4px auto -2px; } 5、CSS3 垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 普通盒子模型 , 设置垂直居中对齐...CSS3 垂直居中是在 边框 + 内边距 + 尺寸 高度垂直居中 */ height: 26px; line-height: 24px; 完整代码示例 : .search {...iOS上加上这个属性才能给按钮输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面弹出菜单*/ img, a {...上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 垂直居中是在 边框 + 内边距 + 尺寸 高度垂直居中 */ height: 26px;

    33720

    前端基础篇css

    ,独占一行,自上而下排列 c) 块状元素可以定义自己宽度高度,以及盒模型任意属性(如margin,padding,border) d) 块状元素可以作为一个容器容纳其他块元素内联元素 2.内联元素...c) 内联元素不能定义宽度高度,以及与高度相关一些属性(margin-top,margin-bottom,padding-top,padding-bottom,line-height) d) 内联元素不能嵌套块元素...常见内联块状元素:img,input,select,textarea 内联块状元素特点: a) 即具有内联元素特点,在一行逐个进行显示 b) 又具有块状元素特点,可以定义宽度高度,以及盒模型任意属性...,值越大速度越快 宽高自适应 一、宽度自适应 语法:width:100%; 注:给元素设置宽度100%将会继承父元素宽度 块状元素默认宽度为100% 注:宽度自适应主要应用在通栏效果 二、高度自适应...语法:height:auto; 或设置高度 注:容器高度由里面内容来决定 三、最大,最小高度,最大,最小宽度 1.最小高度 语法:min-height:数值+单位; 注:IE6不识别min-height

    1.7K30

    Bootstrap基础学习笔记

    设定文本小写 .text-uppercase 设定文本大写 .text-capitalize 设定单词首字母大写 .initialism 显示在 元素文本以小号字体展示,且可以小写字母转换为大写字....list-unstyled 移除默认列表样式,列表项左对齐 ( )。...所有列表项放置同一行 .pre-scrollable 使 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 【文字颜色样式】 .text-muted 柔和文本...、danger、primary、secondary、light、dark} 各种类型配色样式 .fade、.show 设置提示框在关闭淡出淡入效果,要求二个同时调用,示例: <div class....w-100 宽度100% .mw-100 最大宽度100% 高度百分比样式: .h-25 高度25% .h-50 高度50% .h-75 高度75% .h-100 高度100% .mh-100 最大高度

    4.9K31

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    : 10px 0; } 5、设置文本 在链接文本 , 放在 标签 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ;...-- 中间搜索框 JD 图标 --> <!...1) { /* 关闭按钮 宽度占布局宽度 / 设备宽度 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮图像宽度...10%; } .app ul li:nth-child(2) img { /* 在 10% 宽度 Logo 盒子 图片宽度是 30 像素 高度没有给出 但是 宽高等比例缩放...: 15px; /* 搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */ margin-top: 7px; } .jd-icon

    3.3K40

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    一、连续排列链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度 1/3 ; 2、标签结构设置 布局 三个 链接图片..., 如果子元素横向累加宽度超过 当前宽度 , 会自动换行 , 因此这里为每个子元素设置一个 1/3 宽度 , 即 33.33% ; 子元素 设置浮动宽度样式如下 : .brand div...1) { /* 关闭按钮 宽度占布局宽度 / 设备宽度 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮图像宽度...10%; } .app ul li:nth-child(2) img { /* 在 10% 宽度 Logo 盒子 图片宽度是 30 像素 高度没有给出 但是 宽高等比例缩放...: 15px; /* 搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */ margin-top: 7px; } .jd-icon

    3.6K20

    【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

    name="" id=""> 右侧 眼镜图标 使用 label 标签实现 , input 表单 label 放在同一个 div 盒子 , 并为 div 盒子设置 box 类名 ;...密码输入框样式设置 : 设置 输入框 宽度为 370 像素 , 高度设置为 30 像素 , 右侧图标 大小 预留 30 x 30 像素位置 , 设置后样式如下 : 设置 border...属性 , 边框宽度设置为 0 , 就可以取消上述边框 ; /* 去掉边框 */ border: 0; 取消边框后样式 , 边框在默认不显示 , 但是光标移动到...、右侧图标按钮设置 设置 右侧 图标按钮 img 标签元素 , 在 label 标签添加 img 标签子元素 ; <label for=""...; 图片放置在 布局右侧 , 距离顶部 右侧 各 2 像素 , 如果 图片大小设置为 24x24 像素 , 则底部距离图片也有 2 像素 ; /* 绝对定位,相对于最近

    7110

    UI界面视觉平衡终极指南

    举个例子,当我们在创建一组图标,每个图标相互之间视觉平衡是非常重要,如果我们直接图标嵌入方形区域,那么面积更大、更像方形图标视觉权重也会更大。 ?...我们再来看视觉对齐另外一种情况——文字与按钮对齐。看看下面按钮文本,它们看起来都居中是吗? ? 诀窍是,我右边按钮文本向左移动了一点,因为右边边是三角形。...我想介绍第一种方法适用于各种网页APP界面,即文字高度基于大写字母最高高度。 ? 基本上,文字上下距离按钮边缘距离是相等。...下图更多案例,CancelOK更适合使用大写高度对齐方法。因为Cancel没有向下延伸,而OK全是大写。x高度对齐法在下图中仅适合用在Sync按钮,其文本包含了向上伸展向下延伸。...CancelOK用x高度对齐法就有点太高了。 ? 图标按钮情况与文本按钮略有不同。我们把“发送”图案放在一个圆形按钮背景上。你认为哪种图标在视觉上平衡? ?

    2.5K40

    BootStrap应用开发学习入门

    : 移除默认列表样式,列表项左对齐 ( ) .list-inline: 所有列表项放置同一行 .dl-horizontal: 该类设置了浮动偏移,应用于 元素...(1).container类出现内边距外边距,.container-fluid类没有它是宽度设定为auto,所以当缩放浏览器,它会保持全屏大小,始终保持100%宽度。。...#按钮状态 .active #按钮在激活呈现为被按压外观(深色背景、深色边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮,它颜色会变淡 50%,并失去渐变。...height: auto; #相关元素高度取决于浏览器。 max-width: 100%; #让图像按比例缩放,超过其父元素尺寸。...sr-only-focusable # 与 .sr-only 类结合使用,在元素获取焦点显示(如:键盘操作用户) .close #显示关闭按(使用通用关闭图标来关闭模态框警告框) .caret

    17.5K20

    CSS 你需要知道 auto 一切!

    是,如果我们元素item宽度改为100%而不是auto会发生什么? 该元素占用其父项100%,加上左侧右侧边距。...margin auto 关键字 对于margin,最常见用例是已知宽度元素水平居中。 请考虑以下示例: ?...当我们有一个元素应该在它父元素内部水平和垂直居中,我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中: 设置宽度高度。...CSS grid 自动设置一个 auto 列 ? 在CSS Grid,我们可以设置一个列为auto,这意味着它宽度基于它内容长度。...当我们有一个网格,并且其中网格项目具有margin-left: auto:该项目将被推到右边,其宽度基于其内容长度 考虑下面的例子: ? 当我们希望item1宽度基于其内容,而不是网格区域。

    5.3K30

    BootStrap应用开发学习入门

    : 移除默认列表样式,列表项左对齐 ( ) .list-inline: 所有列表项放置同一行 .dl-horizontal: 该类设置了浮动偏移,应用于 元素...(1).container类出现内边距外边距,.container-fluid类没有它是宽度设定为auto,所以当缩放浏览器,它会保持全屏大小,始终保持100%宽度。。...#按钮状态 .active #按钮在激活呈现为被按压外观(深色背景、深色边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮,它颜色会变淡 50%,并失去渐变。...height: auto; #相关元素高度取决于浏览器。 max-width: 100%; #让图像按比例缩放,超过其父元素尺寸。...sr-only-focusable # 与 .sr-only 类结合使用,在元素获取焦点显示(如:键盘操作用户) .close #显示关闭按(使用通用关闭图标来关闭模态框警告框) .caret

    14.6K30

    使用微搭低代码一键搭建企业微官网,网站建设如此简单

    页面的建立方法是在应用管理点击编辑应用按钮 [在这里插入图片描述] 在打开编辑器,点击创建新页面的按钮 [在这里插入图片描述] 在弹出窗口输入标题页面ID,点击确定即可 [在这里插入图片描述]...[在这里插入图片描述] 组件设置了自定义样式后,在大纲树里会多一个cls图标 [在这里插入图片描述] 广告图片 父容器设置好后我们实现第一个功能,顶部广告图片 [在这里插入图片描述] 实现思路是图片放置到容器里即可...在这里插入图片描述] [在这里插入图片描述] 需要设置一下图标组件样式,宽度710 高度280,父容器的话需要设置一下外边距 [在这里插入图片描述] [在这里插入图片描述] 快捷模块 接着需要实现一下快捷模块...,先看一下最终组件图 [在这里插入图片描述] 外层容器主要设置是上外边距,需要和图片有一个间隙 [在这里插入图片描述] 里边容器布局设置成内联块布局,里边内容居中对齐 [在这里插入图片描述]...先增加一个容器,并设置宽度高度,上外边距左右边距 [在这里插入图片描述] 然后再增加一个容器用来显示标题 [在这里插入图片描述] 4.2 解决方案 [在这里插入图片描述] 4.3 关于我们 [在这里插入图片描述

    1.9K30

    Web 技术:CSS最小最大(宽度高度)知识点及优缺点

    在本文中,我们详细介绍CSS最大和最小宽度高度属性,并使用可能用例技巧详细解释每一个属性。 width 属性 首先要讨论是与宽度相关属性。...最小宽度为100px,这样即使按钮内容很短,比如Done,或者只有一个图标,它仍然足够大,可以被注意到。在使用阿拉伯语等多语言网站,这一点非常重要。 考虑以下来自Twitter示例: ?...在以前情况下,按钮上带有单词“تم”,表示完成。 按钮宽度太小,因此在后面的案例,我增加了它最小宽度。 ?...使用最小宽度最大宽度 ? 当min-widthmax-width都用于一个元素,它们哪一个覆盖另一个?换句话说,哪个优先级更高?...按钮 对于按钮最小值最大值有不同用例,因为按钮组件有多种变体。考虑下面的图: ? 请注意,按钮 “Get” 宽度太小。 如果设置最小宽度,则由于任何原因而没有文本,情况可能会变得更糟。

    6K20

    微信小程序入门教程之二:页面样式

    实际开发,直接对标签设置样式,会影响到所有的文本。一般这样用,而是通过class属性区分不同类型文本,然后再对每种class设置样式。...下面解释一下上面这段 WXSS 代码,还是很简单。 (1)height: 100%;:页面高度为整个屏幕高度。 (2)width: 750rpx;:页面宽度为整个屏幕宽度。...可以看到,加入 WeUI 框架以后,只要为按钮添加不同 class,就能自动出现框架提供样式。你可以根据需要,为页面选择不同按钮。 这个示例,元素使用了下面的class。...weui-btn_loading:按钮点击后,操作正在进行样式。该类内部需要用元素,加上表示正在加载图标。 weui-btn_disabled:按钮禁止点击样式。...(这个例子是宽度),上面代码通过style属性指定图片高度宽度(占据页面宽度一半),渲染结果如下。

    1.3K40

    CSS总结

    2.制作翻转按钮效果:两张图片进行合成; 八、CSS技巧 [1]:让盒子水平居中,只需将盒子左右外边距margin设置为auto,即margin:5px auto;   [2]:让盒子内容垂直居中...  [6]:当父元素没有指定高度并且子元素有浮动,这个父元素高度不会自动增加. [7]:在给盒子父盒子加居中,一定要有宽度才能使得父盒子居中....九、CSS元素分类 [1].块状元素:{display:block}一般是其他元素容器,可容纳内联元素其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用...[2].内联元素:{display:inline}内联元素只能容忍文本其他内联元素,它允许其他元素与其同一行,但宽度高度变得不起作用,常见内联元素有:em、span、a等(不能设置宽和高,不影响换行...十、部分CSS样式详解   1.CSS溢出  功能:设置当对象内容超过其指定高度宽度如何显示      语法:Overflow:visible(默认值,剪切内容,也添加滚动条)

    2.1K10
    领券