vertical-align属性上遇到的坑

今天来说说在vertical-align属性上遇到的bug

代码结构大概是这样的

 效果图

效果是这样的

inline-block 的 vertical-align属性默认是baseline对齐 也就是基线对齐 所以这三个inline-block 会基线对齐,而其基线标准就是最后一个inline-block的基线,如果最后这个元素是空的,没有内容,那么这个基线就是元素的margin-bottom被边框线, 如果这个元素里面有内容,那么这个元素的基线就是元素里面内容最后一行文字的基线, 所以我们仔细看看 发现三个li 元素在一行.第一个li 有文字,其基线就为文字底部,后面的没有文字,其基线为元素的边框底部.

所以 第一行的文字底部是和第2 第3 两个li的底部边框线对齐的.

 

 

所以最直接的解决方法就是在li 元素里添加vertical-align 属性不为baseline的值,

下面是调试结果

总结：
 由于行内块元素默认有vertical-align：baseline;

所以vertical-align 属性只能用在行内块元素或者table标签身上

baseline有四个属性值 （top |  bottom |  middle  |baseline(默认)）

 

 

vertical-align属性的使用场景

✔ 解决行内块元素底部3像素空白
✔ 可以通过该属性实现图片垂直居中
【1,先设置行高等于容器的高度（让文字的中线居中对齐）
2. 设置图片的vertical-align:middle；（让图片和文字的中线对齐）】

 

转载于:https://www.cnblogs.com/suriz/p/9318909.html