本文介绍了CSS垂直对齐属性的用法，它定义了行元素相对于元素行基线的垂直对齐方式。





一、前言
垂直对齐的初学者最常用的是表，特别是儿童常见的Dreamweaver，顶部，中部，底部使用，其他应该很少使用，但垂直对齐属性，这样的情况更为复杂，先看看百度的常见问题和眉目传情：
1.vertical-align的意义是什么
2.vertical-align图片和文本的对齐方式的兼容性问题
所有浏览器的兼容性3.vertical-align属性值
如何4.vertical-align实现画面的垂直中心吗
如何实现5.vertical-aling输入{类型= 'checkbox}，{ }收音机的输入类型和文本对齐
6。为什么我设置的垂直对齐属性不起作用
对7.line-height在垂直对齐属性的影响是什么
hellip；hellip；

二、垂直对齐属性介绍
1。适用范围：
垂直对齐指定内联（行内/行内块）元素或表单元格（表单元格）元素的垂直对齐方式。

2。可获得：

值行元素（内联）表单元格（表单元格）中的元素
基线的基线与元素的父元素的基线对齐。一些可替换元素，如文本和HTML标准，不显示基线。使用此标记，每个浏览器的性能可以与对等单元的性能不同。
子元素基线与父元素的下标基线对齐。
超级元素基线与父元素的上标基线对齐。
文本顶部元素的顶部与父元素字体的顶行对齐。
底部的文本底部元素和父元素字体的底线。
长度元素的基线超过父元素的基线高度。
百分比与长度相同，百分比与线高相关。
中间元素的中间线与父元素小写字母的中间线对齐，单元格垂直居中。
顶部元素及其子元素的顶部与整个行的顶部（相对于整个行）对齐，也就是说，元素的内联框的顶部与行框的顶部对齐，单元格的内边缘的上边缘与行的顶部对齐。
底部元素及其后代的底部与行的底部（相对于整个行）对齐，也就是说，元素的行框的底部与行框的底部对齐，而单元格的内部边距的下边缘与行的底部对齐。
三.根据以上描述，我们首先了解几个基本概念：

1）基线、顶线、中线、底线



1 -顶端线
2 -基线
3 -底线
4 -中线
2）高线
文本行相邻行之间的距离

3）行距
文本行的前一行和下一行的顶行之间的距离。

4）内框架
内部框架是浏览器渲染模型中不能显示的概念，但它确实存在，其高度是在该行中指定的高度。

5）线盒（线框）
框架是线的虚拟矩形，是浏览器呈现模式中的一个概念。行框的高度等于行中所有元素内圆的最大值。基线是具有最高行高度的最大行行。其他内部框使用它们的基准线进行对齐，最后计算行框的高度。

6）内容区域
内容区域是底线和顶线包的区域（显示器内的元素：内联可以通过背景颜色属性显示）。它可能在实践中看不到，但它确实存在。内容区域的大小根据字体大小和单词的数量而变化。

4。属性浏览器测试

1）对于行中的元素
垂直对齐属性值与父元素相关（div.parent）和独立的兄弟元素的性能

hellip；

2）用于细胞元素
表单元格元素的默认值如下所示：
Td：左对齐+垂直居中
水平中间+垂直中心
垂直中间传承：TD /日继承TR TBODY /自动继承

hellip；

三。常见的应用：
hellip；

四。参考资料
HTTPS： / /开发商Mozilla。org / / / zh CN文件的CSS /垂直对齐