在编写CSS过程中,很多时候会面临如何将两个元素居中的问题,对于这种情况,在此书的6.8节中有明确的解释,这里将记录下方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //post-detail.wxss .author-box{ display :flex; flex-direction :row; align-items : center ; //align-items: center 表示居中对齐弹性盒的各项元素。 } .avatar { height : 50 rpx; width : 50 rpx; } .author { font-weight : 300 ; margin-left : 20 rpx; color : #666 ; } |
将avatar和author用一个容器包裹起来(author-box),使用display:flex将该容器设置为flex容器模型,使用flex-direction:row指定flex的方向。结束。