vertical-align的那些事

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_39975379/article/details/89358497

写在前面的话：用来指定行内元素和表格单元格元素的垂直对齐方式(不能用他垂直对齐块级元素)

作用在 display 计算值为 inline、inline- block，inline-table或table-cell的元素上

属性值

属性值分为4类：

• 线类：baseline(默认值,兼容ie6\ie7)、top、middle、bottom

• 文本类：text-box、text-bottom(基线和父级元素的字体大小相关)

• 上标下标类：sub、super

• 数值百分比类：20px、2em、20%（兼容ie6\ie7）百分比值是通过line-height计算得到的。

关于vertical-align基线的一些问题

• 在文本之类的内联元素，基线是字母X的下边缘

• 替换元素的基线是替换元素的下边缘

• inline-block元素的基线规则复杂一点：如果没有overflow不是visivisible该元素的基线是margin的低边缘，否则就是里面最后一行内联元素的基线。

实例

关于图标对齐的处理技巧

• 图标的高度要统一，图标高度和当前行高度统一

• 图标标签里面永远有字符，可以使用伪元素的方式生成一个空格字符

• 图标css不使用overflow:hidden

.icon {  display: inline-block;
         width: 20px;
         height: 20px; 
         background: url(sprite.png) no-repeat;
         white-space: nowrap;  
        letter-spacing: -1em; 
         text-indent: -999em; 
       } 
.icon:before {   content: '\3000'; }
/* 具体图标 */ 
.icon-xxx {   background-position: 0 -20px; }

这样写出来的图标不管字体是多大，都和字体垂直对齐