今天小编跟大家讲解下有关CSS属性探秘系列(四)：vertical-align ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS属性探秘系列(四)：vertical-align 的相关资料，希望小伙伴们看了有所帮助。
一、前言vertical-align对于初学者最常见的使用是在表格中了 尤其是使用dreamweaver的童学 常见的数top,middle,bottom了,其他的应该很少用到 但是vertical-align的属性之多 所以情况也略显复杂 下面先来看看百度及Google常见问题：1.vertical-align的含义是什么 2.vertical-align图片和文字对齐兼容性问题 3.vertical-align属性值各浏览器兼容性 4.vertical-align如何实现图片的垂直居中 5.vertical-aling如何实现input[type='checkbox'],input[type='radio']与文本对齐 6.为什么我设置的vertical-align属性不起作用 7.line-height对vertical-align属性的影响 ……
二、vertical-align属性介绍1.适用范围：vertical-align指定了内联（inline/inline-block）元素或表格单元格（table-cell）元素的垂直对齐方式。
2.可取值：
value行内元素(inline)表格单元格中元素(table-cell)baseline元素基线与父元素的基线对齐。一些可替换元素 比如 textarea HTML标准没有说明它的基线 使用此标签是 各浏览器表现可能有差异与同行单元格的基线对齐sub元素基线与父元素的下标基线对齐super元素基线与父元素的上标基线对齐text-top元素顶端与父元素字体的顶线对齐text-bottom元素底端与父元素字体的底线对齐length元素基线超过父元素的基线指定高度。可以取负值percentage同length,百分比相对于line-heightmiddle元素中线与父元素的小写字母的中线对齐单元格垂直居中top元素及其后代的顶端与整行的顶端对齐(相对于整行)即元素的行内框的顶端与行框的顶端对齐单元格的内边距的上边缘与行的顶端对齐bottom元素及其后代的底端与整行的底端对齐(相对于整行)即元素的行内框的底端与行框的底端对齐单元格的内边距的下边缘与行的底端对齐3.根据上面的描述我们先来了解几个基本概念：
1)基线 顶线 中线 底线
:1->顶线:2->基线:3->底线:4->中线2)行高相邻文本行基线间的距离
3)行距上一个文本行基线和下一文本行顶线之间的距离
4)行内框行内框是浏览器渲染模型中的一个概念 无法显示出来 但是它又确实存在 它的高度就是行高指定的高度。
5)行框(line box)行框是指本行的一个虚拟的矩形框 也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准 其他行内框采用自己的对齐方式向基准对齐 最终计算行框的高度）。
6)内容区内容区是指底线和顶线包裹的区域(行内元素display：inline可以通过background-color属性显示出来) 实际中不一定看得到 但确实存在。内容区的大小依据font-size的值和字数进行变化。
4.属性各浏览器测试
1)对于行内元素vertical-align属性值的表现与父元素(div.parent)相关,与兄弟元素的表现无关
待整理…
2)对于单元格元素对于表格单元格元素默认值如下：td:左对齐+垂直居中th:水平居中+垂直居中垂直居中继承：td/th继承自tr继承自tbody/thead
待整理…
三、常见应用：待整理…
四、参考资料https://developer.mozilla.org/zh-CN/docs/CSS/vertical-align
来源：爱蒂网
