vertical-align垂直对齐用法

Posted 2021-01-31 liufuyuan

一、垂直对齐方式{vertical-align：middle/top/bottom；}

　　<img>垂直对齐方式：1）给自身加vertical-align；再设置line-height即可；

　　　　　　　　　　　　注意：img会受文字影响自带行高需加font-size：0；去除影响；

　　　　　　　　　　　　2）给img标签设置参照物，也就是在同级内添加一个空标签，将其空标签高度设置为父元素高度（height：100%；），再给自身加vertical-align；

　　　　　　　　　　　　3）将img的父元素转换成table-cell（display：table-cell；），直接给img加vertical-align；

　　　　　　　　　　　　注意：父元素转成table-cell，margin和padding将不再对其元素产生作用。

　　其他内联元素垂直对齐：将内联元素转为行内块元素（display：inline-block；）再如上img操作即可。