使用align-item为center后i图标和文字依旧不对齐

于 2024-10-07 16:46:14 发布
阅读量106 收藏 1
点赞数
分类专栏： Vue 前端 JavaScript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zwwxd666/article/details/142742799
版权
前端 同时被 3 个专栏收录
41 篇文章 1 订阅
订阅专栏
JavaScript
23 篇文章 0 订阅
订阅专栏
Vue
22 篇文章 0 订阅
订阅专栏

image-20241007155349788

明明都设置了align item为center了

解决方法

设置vertical align （这个还能给图片？还是文字设置基线对齐那些）

baseline

使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线，如`` ，这意味着这些元素使用此值的表现因浏览器而异。

text-top

使元素的顶部与父元素的字体顶部对齐。

text-bottom

使元素的底部与父元素的字体底部对齐。

middle

使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。

``

使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。

image-20241007160459962

这个就是给文字的上间距拉大了

image-20241007160349890

使用verticle-align:midller即可

最常用应该是middle和baseline把，文字和图标在盒子中间

Zww0891
关注
专栏目录
解决css使用align-items文字与数字对齐不了问题
SiShen654的博客
08-30 4895
使用下列属性即可 line-height: 100%;
在flex居中布局中，图标和文字没有对齐？
light的博客~~~
06-29 1200
在flex居中布局中，图标和文字没有对齐？
解决align-items失效，无法居中问题
热门推荐
angula
08-29 1万+
在做flex布局的时候，有时候你可能会遇到align-items失效的问题，那么下面来说一下 css #main{ display: flex; justify-content: center; align-items: center; } #content{ width: 100px; height: 100px; background-color: #1890FF; } 此时align-items失效，只能水平居中，.
【文字和图片居中对齐】图片和文字垂直居中对齐，span使用margin和line-height不生效解决办法
seeeeeeeeeee的博客
05-07 1636
图片展示 问题： 今天遇到的问题，我需要一行展示一堆的图片，中间穿插#号，那我就直接一个img标签一个span标签了，直接就排在了一起，非常简单。然后需求是井号要在图片的中间。我就直接加了个行高，发现没生效，然后又试了一下margin-bottom，准备给他顶上去，也不生效。又想到span是行内元素，我就加了inline-block，但是还是都不生效。 后来发现这样写可以生效。 代码 html部分 <div class="liaokuangbox"> <img
图标文字不对齐问题解决方案
星辰的笔记
12-11 540
目前最简单的解决方法 <div class="icon_box"> <img src="图标.jpg" />文字描述 </div> .icon_box { display: flex; align-items: center; } 给icon_box定义flex并且定义上下居中即可
flex布局无法设置图片icon和文本垂直居中对齐问题
小绵杨
06-23 611
flex布局无法设置图片icon和文本垂直居中对齐问题
uniapp微信小程序--对齐两列文字
apple_70049717的博客
01-21 952
一共有两列，当左边字多的时候，你右边用左边距布局，就显示的不够整齐。
解决同一行文字与图片不对齐问题
Fat_Shady_的博客
06-11 2329
开发写样式时经常遇到这种问题：即同一个div内图片与其后的文字并不对齐，这时候一般想到的是使用定位，但定位并不好，在屏幕大小变化很大的时候样式会异常 这时候就可以直接在图片的属性里加vertical-align: middle;即可对齐，效果如下： 使用flex布局也能达到这种效果且更好兼容不同设备浏览器： 在图片和文字的父盒子里display: flex; align-items: center;即可。 附上flex的align-items属性在线演示链接 ...
android 图标居中,文字和图标在部分安卓（小米、魅族）居中对其问题？
weixin_35660038的博客
05-29 588
在做文字和小图标居中对齐时，在部分安卓机上会出现文字偏上的问题，导致文字和图标不是居中对其的尝试的方法有：display：inline-block；vertical-align：middle；弹性盒模型，padding相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码).box {display: flex;justify-content: flex-start;align-items: c...
vant 自定义 van-dropdown-item的用法
10-15
`text-align: center` 使得内容居中对齐。 3. `.choice_bottom`: 这是底部固定的部分，包含“确定”和“取消”两个按钮。按钮使用浮动布局（`float: left`）并设置了圆角和背景颜色，以达到预期的设计效果。 为了...
DIV+CSS图标文字列表布局样式代码
06-11
这样的CSS代码可以确保每个列表项具有统一的视觉效果，图标和文字都按照预设的样式呈现。同时，`display: flex;`使我们可以轻松地处理不同屏幕尺寸下的响应式布局，让列表在手机、平板和桌面设备上都能有良好的显示...
WebGrid标头对齐和排序图标
04-05
你可以根据需要设置为`"align-left"`或`"align-center"`。 对于排序图标，WebGrid默认会根据是否启用了排序功能来显示升序（升序）和降序（降序）图标。默认情况下，当用户点击列头时，WebGrid会根据该列进行排序。...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1120
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 482
Vue根实例、实例总结
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1199
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
登录功能开发 P167重点
2303_81204446的博客
09-30 424
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1215
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 193
Vite。
uni-data-select下拉框的每个选项加图标
06-07
要给 `uni-data-select` 下拉框的每个选项添加图标，你可以使用 `uni-icons` 组件和 `slot` 插槽来实现。首先，在 `uni-data-select` 组件中，定义一个插槽，用于渲染每个选项。然后，在每个选项中，使用 `uni-icons` 组件来设置图标。 ```html <template> <view> <uni-data-select :list="list"> <template #default="{ item }"> <view class="item"> <uni-icons :type="item.icon" size="20"></uni-icons> <span>{{ item.text }}</span> </view> </template> </uni-data-select> </view> </template> <script> import UniIcons from '@/components/uni-icons/uni-icons.vue'; export default { components: { UniIcons }, data() { return { list: [ { value: '1', text: '选项1', icon: 'search' }, { value: '2', text: '选项2', icon: 'home' }, { value: '3', text: '选项3', icon: 'settings' } ] }; } }; </script> <style> .item { display: flex; align-items: center; } </style> ``` 在这个例子中，我们在 `uni-data-select` 组件中定义了一个插槽，用于渲染每个选项。在插槽中，我们使用 `uni-icons` 组件来设置每个选项的图标。每个选项都有一个 `icon` 属性，用于指定要显示的图标类型。我们还设置了 `size` 属性来调整图标的大小。 你还可以根据需要自定义每个选项的样式，例如在这个例子中，我们使用 CSS 来将每个选项的图标和文本水平居中对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值