小程序解决icon图片与文字不居中问题

在项目中其实这种小问题很常见,那就是图片和文字不是自己想要的那种居中效果,经常一上一下的很难看,这当然是不行的了,所以该怎么解决呢?使用flex布局可以解决这个问题。关键就在 align-items: center
1.wxml:

  投票

2.wxss:

/* 投票 */
.vote{height: 50rpx;margin-top: 2%;display: flex;align-items: center
}
.vote .icon>image{width: 32rpx;height: 32rpx; 
}
.vote>.text{margin-left: 3%;font-size: 30rpx;color: #333;
}

效果如图所示:
在这里插入图片描述
总结:
align-items:center 整体子元素垂直居中(也可以使用margin或padding或定位来实现)
在这里插入图片描述
在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部