注：line-height 行高为0，文本基线是文本本身的一半高度；
一、vertical-align 基本值分类：
1.线类
baseline
//默认。元素放置在父元素的基线上。
top
//把元素的顶端与行中最高元素的顶端对齐。
middle
//把此元素放置在父元素的中部。
bottom
//把元素的顶端与行中最低的元素的顶端对齐。
2.文本类
text-top
//把元素的底端与父元素字体的顶端对齐。
text-bottom
//把元素的底端与父元素字体的底端对齐。
3.上下标类
sub
//垂直对齐文本的下标。
super
//垂直对齐文本的上标。
4.数值百分比类
20px 2em 20%...
------------------------------------------------------------------------------
inherit : 规定应该从父元素继承 vertical-align 属性的值。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
------------------------------------------------------------------------------
百分比%：
使用 "line-height" 属性的百分比值来排列此元素，允许使用负值。（IE7及以下不支持小数line-height）
二、vertical-align无效
1.vertical-align只能应用于行内元素（img,span,td...），默认状态下即：图片、按钮、文字、单元格；
2.display：更改元素的显示水平；（如：display：block，浮动）
3.CSS声明更改元素的显示水平；
最后
以上就是勤恳柠檬最近收集整理的关于简单理解vertical-align的全部内容，更多相关简单理解vertical-align内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复