css除去flex类的几种对齐方式的思考
2018-06-18 本文已影响17人
三不小青年
1Margin: 0 auto 水平居中
适用于block元素，或者位于flex布局里面的子元素
/* pages/margin/margin.wxss */
/*弹性布局下，图片即使只内联元素布局,也可用margin 0 auto 居中*/
/*第一种方法 */
.userinfo{
}
.userinfo image{
width: 100rpx;
height: 100rpx;
/* 水平居中*/
margin: 0 auto;
/* 内联元素不行 */
display: block;
}
/*第二种方法*/
.userinfo{
display: flex;
}
.userinfo image{
width: 100rpx;
height: 100rpx;
/* margin: 0 auto; */
}
2vertical-align 适用于inline-block元素，在弹性布局里面不起作用，通过给图片添加样式，反作用于文字
/* 实现文字和图片的垂直居中，*/
.userinfo{
/*若添加diaplay flex 则不起作用 */
}
.userinfo text{
font-size: 30rpx;
}
.userinfo image{
width: 100rpx;
height: 100rpx;
vertical-align: middle;
}
3text-align 适用于blcok元素，或者弹性布局下的子元素
0
.userinfo{
display: flex;
flex-direction: column;
}
.userinfo text{
/* display: block; */
font-size: 30rpx;
text-align: right;
}
.userinfo image{
width: 100rpx;
height: 100rpx;
}
