前面已经讨论了网页设计中的水平对齐，下面来看垂直对齐。因为文本行的构造将在第7章更详细地讨论，这里只是提供一个简单的概述。

行高

line-height属性是指文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或减少多少，在最基本的情况下，指定line-height可以用来增加（或减少）文本行之间的垂直间隔，人们认为这是一种了解line-height:如何工作的简单方法，但其实并不简单。line-height控制了行间距，这是文本行之间超出字体大小的额外空间。换句话说，line-height值和字体大小之差就是行间距。

在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离。注意，它定义的是最小距离，而不是一个绝对数值，文本基线拉开的距离可能比line-height值更大，line-height并不影响替换元素的布局，不过确实可以应用到替换元素（这个小秘密将在第7章揭开）。

构造文本行

文本行中的每个元素都会生成一个内容区，这由字体的大小确定。这个内容区则会生成一个行内框（inline box），如果不存在其他因素，这个行内框就完全等于该元素的内容区，由line-height产生的行间距就是增加或减少各行内框高度的因素之一。

要确定一个给定元素的行间距，只需将line-height的计算值减去font-size的计算值。这个值是总的行间距。而且要记住，这可能是一个负值。然后行间距再除2，将行间距的一半分别应用到内容区的顶部和底部。其结果就是该元素的行内框。

举个例子，假设font-size为14像素高（相应地，内容区的高度也是14像素），而且line-height计算为18像素。其差（4像素）除以2，将其一半分别应用到内容区的顶部和底部。这会得到一个18像素高的行内框，在内容区的上面和下面分别有2个额外的像素。听上去用这种方法描述line-height如何工作好像很绕，不过这样描述有充分的理由。

一旦给定内容行已经生成了所有行内框，接下来在行框的构造中就会考虑这些行内框。行框的高度恰好足以包含最高行内框的顶端和最低行内框的底端。

指定line-height 值

下面来考虑line-height的可取值。如果使用默认值normal，用户代理必须计算行间的垂直空间。不同的用户代理计算出的值可能不同，不过通常都是字体大小的1.2倍，这使得行框要高于给定元素的font-size值。

大多数值都是简单的长度度量（例如，18px或2em）。注意，即使使用一个合法的长度度量，如4cm，但浏览器（或操作系统）在实际度量中使用的标准可能并不正确，所以在你的显示器上行高可能不是4厘米。更多细节参见第4章。

em, ex和百分数值都相对于元素的font-size值计算。

行高和继承

当一个块级元素从另一个元素继承line-height时，问题会变得更为复杂。line- height 值从父元素继承时，要从父元素计算，而不是在子元素上计算。以下标记的结果如图6-9所示。但创作人员原来可能并不想这样：

body {font-size: 10px;}

div {line-height: 1em;}/* computes to -10px */

p {font-size: 18px;}

<div>

<p>This paragraph-s 'font-size' is 18px, but the inherited 'line-height' value is only l0px. This may cause the lines of text to overlap each other lay a small amount .</p>

</div>

图6-9: line-height小，font-size大，这就带来了问题

为什么这些行挨得这么近？因为段落从其父元素div继承了line-height的计算值10px。如图6-10所示，对于这种line-height太小的问题，一种解决办法是为每个元素设置一个显式的line-height，但是这种方法不太实用。更好的办法是指定一个数，由它设置缩放因子：

body {font-size: 10px;}

div {line-height: 1;}

p {font-size: 18px;}

指定一个数时，缩放因子将是继承值而不是计算值。这个数会应用到该元素及其所有子元素，所以各元素都根据其自己的font-size计算line-height （见图6-10所示）:

div {line-height: 1.5;}

p {font-size: 18px;}

<div>

<p>This paragraph's 'font-size' is 18px, and since the 'line-height' set for the parent div is 1.5, the 'line-height' for this paragraph is 27px (18 * 1.5).</p>

</div>

尽管看上去line-height在每个文本行的上面和下面平均分配了额外空间，实际上，它是在行内元素的内容区顶部和底部增加（或减少）一定的量来创建一个行内框。假设一个段落的默认font-size是12pt，考虑以下规则：

p (line-height: 16pt;)

由于12点文本的“固有”行高是12点，前面的规则将在段落中各行文本外围增加额外的4点空间。这个额外的量平均分为两部分，一半放在各行的上面，另一半放在各行的下面。现在基线间则有16点空间，这是分配额外空间的间接结果。

如果指定值inherit，元素则会使用其父元素的计算值。这与值自然继承没有什么不同，不过特殊性和层叠解决方案不同。这些内容在第3章曾做过详细讨论。

既然已经基本了解了如何构造文本行，下面来讨论相对于行框垂直对齐元素。

垂直对齐文本

如果你曾用过元素sup和sub（上标和下标元素），或者曾用过有<img src="foo.gif" align="middle">之类标记的图像，说明你已经做过一些基本的垂直对齐，在CSS中，vertical-align属性只应用于行内元素和替换元素，如图像和表单输入元素。vertical-align属性不能继承。

vertical-align只接受8个关键字、一个百分数值或一个长度值。这些关键字有些我们很熟悉，有些可能不熟悉，包括：baseline（默认值）、sub、super、bottom、text- bottom、middle、top和text-top。我们将分析各关键字如何作用于行内元素。

vertical-align

值：

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

初始值：

baseline

应用于：

行内元素和表单元格

继承性：

无

百分数：

相对于元素的line-height值

计算值：

对于百分数和长度值，为绝对长度；否则，根据指定确定

说明：

网页设计中应用到表单元格时，只能识别baseline、top、middle和bottom等值

警告：要记住：vertical-align不影响块级元素中内容的对齐。不过，可以用它来影响表单元格中元素的垂直对齐。详细内容参见第11章。

基线对齐

vertical-align: baseline要求一个元素的基线与其父元素的基线对齐。大多数情况下，浏览器都会这么做，因为网页设计中你显然希望一行中所有文本元素的底端都对齐。

如果一个垂直对齐元素没有基线——也就是说，如果这是一个图像或表单输入元素，或者是其他替换元素——那么该元素的底端与其父元素的基线对齐，如图6-11所示：

img {vertical-align: baseline;}

<p>The image found in this paragraph <img src="dot.gif" alt="A dot"/> has its bottom edge aligned with the baseline of the text in the paragraph.</p>

这个对齐规则很重要，因为它在网站建设上总把替换元素的底边放在基线上，即使读行中没有其他文本。例如，假设一个表单元格中只有一个图像。这个图像可能实际在基线上，不过在某些浏览器中，基线下面的空间会导致图像下出现一段空白。另外一些浏览器则会把图像“紧包”在表单元格中，所以不会出现空白。根据CSS工作组的意见，这种加空白的行为是正确的，不过大多数创作人员都不喜欢这种做法。

注意：对于这种加空白的行为以及相应的解决办法，更详细的解释见我的文章《Images, Tables, and Mysterious Gaps》(http://developer.mozilla.org/en/docs/Images._Tables._and_Myslerious_Gaps)。第7章也会更详细地介绍行内布局的这个方面。

上标和下标

vertical-align: sub声明会使一个元素变成下标，这意味着其基线（或者如果这是一个替换元素，则是其底端）相对于其父元素的基线降低。规范并没有定义元素降低的距离，所以对于不同的用户代理，这个距离可能有所不同。

super刚好与sub相反，它将元素的基线（或替换元素的底端）相对于父元素的基线升高。同样地，文本升高的距离取决于具体的用户代理。

注意，值sub和super不会改变元素的字体大小，所以下标或上标文本不会变小（或变大）。相反，下标或上标元素中的所有文本默认地都应当与父元素中的文本大小相同，如图6-12所示：

span.raise {vertical-align: super;}

span.lower {vertical-align: sub;}

<p>This paragraph contains <span class="raise">superscripted</span> 

and <span class="lower">subscripted</span> text.</p>

图6-12：上标和下标对齐

注意：如果想让上标或下标文本小于其父元素的文本，可以使用属性font-size，这在第5章曾做过介绍。

底端对齐

vertical-align: bottom将元素行内框的底端与行框的底端对齐。例如，以下标记的结果如图6-13所示：

.feeder {vertical-align: bottom;}

<p>This paragraph, as you can see quite clearly, contains a <img src="tall.gif" alt="tall" class="feeder" /> image and a <img src="short.gif" alt="short" class="feeder"/> image, and then some text that is not tall.</p>

图6-13中，段落的第二行包含两个行内元素，其底边彼此对齐。它们都在文本基线之下。

vertical-align: text-bottom是指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。对于这些元素，将考虑一个“默认”的文本框。这个默认框由父元素的font-size得到。要对齐的元素的行内框底端再与这个默认文本框的底端对齐。因此，给定以下标记，可以得到如图6-14所示的结果：

img.tbot {vertical-align: text-bottom;}

<p>Here: a <img src="tall.gif" style="vertical-align: middle;" alt="tall"/> image, and then a <lmg src="short.gif" class="tbot" alt="short"/> image.</p>

vertical-align:top的效果与bottom刚好相反，类似地，vertical-align:text-top则与text-bottom的作用相反。图6-15显示了以下标记的结果：

.up {vertical-align: top;}

.textup {vertical-align: text-top;}

<p>Here: a <img src="tall.gif" alt="tall image"> tall image, and then <span class="up">some text</span> that's been vertically aligned.</p><p>Here: a <img src="tall.gif" class="textup" alt="tall"> image that's been vertically aligned, and then a <img src="short.gif" class="textup" alt="short"/> image that's similarly aligned.</p>

当然，对齐的具体位置取决于行内有哪些元素，它们有多高，以及父元素字体的大小。

居中对齐

还有一个值middle，它往往（但并不总是）应用于图像。你可能会从它的名字想象其效果，但你的想象与其实际效果并不完全一样。middle会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐，这里的1ex相对于父元素的font-size定义。图 6-16更详细地说明了这一点。

因为大多数用户代理都把1ex处理为0.5em, middle往往将元素的垂直中点与父元素基线上方0.25em处的一个点对齐。不过，不要指望总会这样，因为有些用户代理确实会为各元素计算准确的x-height（关于x-height的更多详细内容见第5章）。

百分数

使用百分数不能模仿图像的align="middle"对齐。相反，如果为vertical-align设置一个百分数，会把元素的基线（或替换元素的底边）相对于父元素的基线升高或降低指定的量（你指定的百分数要计算为该元素line-height的百分数，而不是相对于其父元素的line-height）。正百分数值会使元素升高，负值则会使其降低。取决于文本的升高或降低，可能看上去它放在了相邻的行上。

下面更详细地考虑百分数值。假设有以下标记：

<div style="font-size: 14px; line-height: 18px;">

I felt that, if nothing else, I deserved a

<span styles="vertical-align: 50%;">raise</span> for my efforts.

</div>

设置为50%的span元素对齐时，会使其基线升高9像素，这是元素继承的line-height 值（18px）的一半，而不是7像素。

长度对齐

最后，来考虑根据指定长度垂直对齐。vertical-align很明确：它把一个元素升高或降低指定的距离。因此，vertical-align: 5px;会把一个元素与对齐前相比上升5像素。负长度值会使元素下降。这种简单的对齐形式在CSS1中不存在，但在CSS2中已经增加。

要认识到垂直对齐的文本并不会成为另一行的一部分，它也不会覆盖其他行中的文本，这很重要。考虑图6-18，其中在段落中间出现一些垂直对齐文本。

可以看到，所有垂直对齐的元素都会影响网页设计中的行高。应该记得行框的描述，其高度要足以包含最高行内框的顶端和最低行内框的底端。这包括因垂直对齐上升或下降的行内框。