图7-30 包含替换元素的行高在IE内失效
由图7-30读者可以发现，IE 7.0中，将半行距分别加在了图片的上下，而由于图片默认是基线对齐，因此文字的基线下移了，这显然不符合CSS中的规定。
对于IE 6.0中行高失效的问题，需要使用CSS Hack手段来针对IE 6.0设定替换元素的上下补白来修正。
提示：关于针对IE 6的CSS Hack，请参见本书[第16章：浏览器与Hack]。
7.3.5 应 用：单行文字在垂直方向居中
在网页设计中，往往为了突出标题而添加背景图案，如图7-31所示。
图7-31 包含背景图片的标题
假设此标题的XHTML代码如下：
<div id=”#sample”> <h2>热门帖大盘点</h2> …… </div>
此时如果只设定<h2>的背景图片和高，则文字会偏上，如图 7-32所示。
图7-32 未设定行高的标题文字
针对这个现象，一般只需要设定与高度相等的行高即可，相关代码如下：
#sample h2 { height : 31px; line-height : 31px; …… }
此时在浏览器内文字已经在垂直位置上居中显示，如图7-33所示。
图7-33 设定行高后的标题文字
此方法同样可以运用在其他需要文字垂直居中显示的地方，例如列表项、导航条等 等。
上一小节讲解了行高与单行纯文字的垂直居中，而如果行内含有图片和文字，在浏览 器内浏览时，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐，如图7-34所示。
图7-34 文字和图片内容默认垂直对齐方式为基线对齐
这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。
7.4 vertical-align
7.4.1 语 法
vertical-align属性的具体定义列表如下：
语法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明： 设置元素内容的垂直对齐方式
值： baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对 齐；bottom：底端对齐；text-bottom：文本的底端对齐；
百分比和长度： CSS2，可为负数。
