简单理解vertical-align

注: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声明更改元素的显示水平;


猜你喜欢

转载自blog.csdn.net/Chen_start02/article/details/79150426