在编写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的方向。结束。