章：浏览器与Hack]。
7.3.5 应用：单行文字在垂直方向居中
在网页设计中，往往为了突出标题而加入背景图案。如图7-31所看到的。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
图7-31 包括背景图片的标题
假设此标题的XHTML代码例如以下：
<div id=”#sample”> <h2>热门帖大盘点</h2> …… </div>
此时假设仅仅设定<h2>的背景图片和高，则文字会偏上，如图7-32所看到的。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
图7-32 未设定行高的标题文字
针对这个现象，一般仅仅须要设定与高度相等的行高就可以，相关代码例如以下：
#sample h2 { height : 31px; line-height : 31px; …… }
此时在浏览器内文字已经在垂直位置上居中显示。如图7-33所看到的。
图7-33 设定行高后的标题文字
此方法同样能够运用在其它须要文字垂直居中显示的地方。比如列表项、导航条等等。
上一小节解说了行高与单行纯文字的垂直居中。而假设行内含有图片和文字，在浏览器内浏览时，读者能够发现文字和图片在垂直方向并非沿中线居中，而是沿基线对齐。如图7-34所看到的。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
图7-34 文字和图片内容默认垂直对齐方式为基线对齐
这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align:baseline）。