图片和文字的中线对齐一直是一个头疼的问题。之前一直用flex布局做垂直居中对齐,但是从来没有认真研究过。
flex布局的兼容性:
我在ios和几款android手机上测试了一下可以兼容。
常用属性:
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
兼容写法:
.box{
display: -webkit-flex; /*webkit*/
display: flex;
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
几种属性展示如下:
1.水平垂直居中对齐
.box {
display:flex;
justify-content:center;
align-items:center;
}
由于行高line-height的影响,可以发现文字和图片中线并没有对齐,只是他们所占的空间的中线对齐了。
为了使文字的中线和图片对齐,可以设置行高等于字体的大小。
2.水平分散对齐+垂直居中对齐
.box {
display:flex;
justify-content:space-around;
align-items:center;
}
3.水平两端对齐+垂直居中对齐
.box {
display:flex;
justify-content:space-between;
align-items:center;
}
4.水平平均分散+垂直居中对齐
(ps:新属性,chrome和firefox中已经有这个属性了,其他还没有,暂时不要用)
.box {
display:flex;
justify-content:space-around;
align-items:center;
}
(ps:虽说是基线对齐,但是汉字和英文底线还是没有对齐...╮(╯3╰)╭)
.box {
display:flex;
justify-content:center;
align-items:baseline;
}
6. 垂直上下铺满+水平居中对齐
(ps:子元素设置了高度则为设置的高度;未设置高度,则高度等于父元素的高度)
.box {
display:flex;
justify-content:center;
align-items:stretch;
}