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

原始代码的问题

<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，与文字基线对齐会导致微妙的偏移

修改后的代码

<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容器的对齐规则