解决在微信小程序中view组件下的text和images设置了样式display: flex; align-items: center;对不齐

原始代码的问题

html 复制代码
<view style="display: flex; align-items: center;">
  <text style="line-height: 1;">全国</text>
  <image src="/images/xia.png" style="height: 20rpx; width: 20rpx; display: block;"></image>
</view>

问题1:<text>元素的默认行高影响对齐

  • <text>元素默认有行高(line-height),会导致文字实际占位高度大于字体大小
  • 即使设置了align-items: center,图片也会基于文字基线对齐,而不是视觉中心对齐

问题2:<image>元素的默认显示方式

  • <image>默认是内联(inline)元素,会受到文本基线对齐规则影响
  • 图片的垂直对齐方式默认为baseline,与文字基线对齐会导致微妙的偏移

修改后的代码

html 复制代码
<view style="display: flex; align-items: center;">
  <text style="line-height: 1;">全国</text>
  <image src="/images/xia.png" style="height: 20rpx; width: 20rpx; display: block;"></image>
</view>
  • line-height: 1将行高设置为与字体大小相同
  • 消除了文字上下多余的空白,使文字高度更精确
  • 让Flex的align-items: center能基于实际内容高度居中
  • 将图片从默认的inline改为block显示
  • 避免受到文本基线对齐的影响
  • 使图片完全遵循Flex容器的对齐规则
相关推荐
说私域5 小时前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO6 小时前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)9 小时前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
lumi.12 小时前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
weixin_1772972206914 小时前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀
毕设源码-赖学姐14 小时前
【开题答辩全过程】以 基于Springboot+微信小程序的网上家教预约系统的设计与实现-开题为例,包含答辩的问题和答案
spring boot·后端·微信小程序
weixin_1772972206914 小时前
扭蛋机小程序系统开发:连接线上线下娱乐的新桥梁
小程序·娱乐·扭蛋机·盲盒
毕设源码-赖学姐16 小时前
【开题答辩全过程】以 交通管理乱停车小程序的设计与实现为例,包含答辩的问题和答案
小程序
说私域16 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的营销创新研究——以“种草”实践践行“以人为本”理念
人工智能·小程序
说私域16 小时前
电商栏目细分与定制开发开源AI智能名片S2B2C商城小程序:洞察力与执行力的协同共进
人工智能·小程序