uniapp开发中遇到图片与文字在开发者工具上效果显示中心线是在同一水平线上,但真机调试时,文字在垂直方向上位置上移。

在日常开发中,使用flex使文字与图片中心线在同一水平线上,为了解决本文所遇到的问题,只需在flex布局中添加行高line-height,即可保证真机调试与开发者工具上的界面效果相同。

<view class="flex-item">
		<view class="font3-28">已选择</view>
		<image src="../../static/images/right.png" mode="aspectFill" class="rightImg">                
        </image>
</view>


//css
.flex-item {
	display: flex;
	line-height: 28upx;
	align-items: center;
}

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐