原始代码的问题
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容器的对齐规则