网页中所有的行内元素在垂直方向上都遵循一定的排列规则，这个规则由CSS的属性verticalalign来定义。这个属性可以指定包括文字、图片和HTML标签在内的各种元素，它的取值是一系列保留关键字、长度值或百分比，如下表所示：
表12.3.2 vertical-align属性的值
图12.3.4 CSS垂直对齐方式解析
在这里我们要介绍一下基线的概念，文字在网页中的排版类似于我们小时候学拼音和英语时用到的四线三格。如图12.3.4中所示，字母h、字母e、字母g和数字1在排版时所占的垂直空间大小和位置都是不一致的。字母排列垂直对齐的位置被我们称作基线，这也是元素垂直对齐的默认方式。
动手写12.3.4 表格的默认垂直对齐方式
“动手写12.3.4”中的表格单元格未对vertical-align属性进行设置，文字在默认情况下以单元格的中线为准对齐。本例的效果如图12.3.5所示：
图12.3.5 表格单元格默认情况下的垂直对齐方式
动手写12.3.5 表格单元格顶端对齐
(www.xing528.com)
“动手写12.3.5”中的表格的td元素将vertical-align属性设置为top，这样表格中的文字默认会靠单元格的顶部排列。本例的效果如图12.3.6所示：
图12.3.6 单元格内容靠顶部对齐
对于表格单元格之外的行内元素排列，默认是以基线为准对齐的。在学习HTML的图片应用时，我们曾经介绍过文字和图片并排、图片和图片并排的情况，它们在垂直方向上总是以底部为基准进行对齐的，如图12.3.7所示，这是因为图片元素的基线被认为是图片的最底部。而另外一些具有明显浏览器差异的行内元素，如input、textarea等，它们在不同的浏览器中的基线是不一样的，所以同样的页面内容在不同浏览器中有时会展示出不同的效果。
图12.3.7 默认情况下图片和文字的基线对齐
动手写12.3.6 文字和图片的居中垂直对齐
“动手写12.3.6”中把img元素和span元素这对兄弟元素的vertical-align属性设置为middle，这样它们就会以元素的中线为基准进行对齐了。本例的效果如图12.3.8所示：
图12.3.8 图片和文字的中线对齐
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
