您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序垂直居中问题的经典解决方法

微信小程序垂直居中问题的经典解决方法

在编写CSS过程中,很多时候会面临如何将两个元素居中的问题,对于这种情况,在此书的6.8节中有明确的解释,这里将记录下方法。

//post-detail.wxss
.author-box{
	display:flex;
	flex-direction:row;
	align-items:center; //align-items:center 表示居中对齐弹性盒的各项元素。
}
.avatar {
	height:50rpx;
	width:50rpx;
}
.author {
	font-weight:300;
	margin-left:20rpx;
	color:#666;
}

将avatar和author用一个容器包裹起来(author-box),使用display:flex将该容器设置为flex容器模型,使用flex-direction:row指定flex的方向。结束。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了