以下代码在模拟器看起来是居中的 但在真机上一看瞬间奔溃 视觉上会往下偏
.btn{
background: #ffffff;
box-shadow: 0 0 20rpx #d3ecf3;
padding: 16rpx 0;
text-align: center;
flex-grow: 1;
margin: 0 20rpx;
border-radius: 40rpx;
color: #78bccf;
width: calc(50vw - 60rpx);
min-width: calc(50vw - 60rpx);
max-width: calc(50vw - 60rpx);
}
.btn-icon{
width: 30rpx;
height: 30rpx;
display: inline-block;
vertical-align: middle;
}
.btn-text{
display: inline-block;
vertical-align: middle;
margin-left: 10rpx;
}
<view class="btn">
<image src="/assets/images/search.png" class="btn-icon" />
<view class="btn-text">
搜索设备
</view>
</view>
折腾了一番决定使用flex布局来代替 vertical-align: middle,修改后的代码
.btn{
background: #ffffff;
box-shadow: 0 0 20rpx #d3ecf3;
padding: 16rpx 0;
text-align: center;
flex-grow: 1;
margin: 0 20rpx;
border-radius: 40rpx;
color: #78bccf;
width: calc(50vw - 60rpx);
min-width: calc(50vw - 60rpx);
max-width: calc(50vw - 60rpx);
display: flex;
justify-content: center;
align-items: center;
}
.btn-icon{
width: 30rpx;
height: 30rpx;
}
.btn-text{
margin-left: 10rpx;
}
效果对比
vertical-align: middle的效果 flex布局效果