CSS vertical-aglin属性基本应用

CSS vertical-aglin属性在内联元素方面的应用

1.vertical-align的基本介绍

1.1定义：vertical-align 属性设置元素的垂直对齐方式。

1.2兼容性：所有浏览器都支持 vertical-align 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

1.3

1.4具体可以参考w3school

2.vertical-aglin在文字对齐方面的初步应用了解

2.1首先看图（有错别字求忽略）

首先要知道vertical-aglin对block块级元素不起作用。
上图除了父级是DIV ，其余均为span元素。

从图中可以看到 黑色的边框，这里我们需要建立一个inline-box的概念——包含同一行的元素的盒子。盒子的高度取决于行元素的大小。

对应关系分别是：
盒子的中线——middle
盒子的顶部——vertical-align:top
盒子的底部——vertical-align:bottom

父级文字的顶部——vertical-align:text-top
父级文字的底部——vertical-align:text-bottom
默认：middle

2.2其实内联元素也是一个道理。添加一张图片看看。

这里需要注意的是：vertical-align只对同一行的内联元素起作用！！。
那么换行了会怎么样呢，看图

2.3 如果没有父级文字呢？
text-top/text-bottom 的位置和 父级的文字font-size有关。可以假设有font-size：？px大小的文字（只是看不见）。然后还是同样的道理，带入inline-box的概念。

3.总结

个人还是不是很懂这个属性，涉略很浅。这里是对平时文字对齐使用的总结。有兴趣的可以看张鑫旭的我对CSS vertical-align的一些理解与认识。篇幅有点长，请耐心看完。这篇文章主要是为自己以后温习做一个小铺垫，有错误还请指正。