图片在框内平行css,CSS行内垂直对齐

关于CSS行内对齐这一个话题，接触已久，只是一直以来没有什么兴趣来整理成文。

说到垂直对齐问题，在CSS中指的是行内垂直对齐，相关属性有

font-size、line-height、vertical、以及对于非置换元素来说还有其margin

box模型。

1、从字体大小 到 行内框

首先我们需要了解一些基本概念，在我们开始研究这个话题之前。让我们先从font-size说起好了。

在CSS规范中，每选用一个字体(对字体有兴趣的同学，请点击这里)，

我们通过设定其 font-size值，实际上是确定了该字体的 em box 。比如我们设定字体大小为 font-size:

14px，这就指定了我们选用大小为14px 的 em box

来进行网页字体的渲染。这里的14px并不是指实际字符的所占用的空间，而是指在没有 leading 的情况下(即

line-height:1em)垂直方向上相邻的文本基线之间的距离。 因此14px是指在我们设定该字体的 line-height:

1em 时相邻两行文本基线间的距离是14px。

解释了什么是em box 的概念之后，我们才能继续深入理解 什么是 content

box。

一 般来说，在指定的font-size 的情况下，大部分字体的 em box

的高度能够足够显示出该字体中的所有字符，但是还是有一些字体(比如通用的手写体)，其显示字符所占用的高度会超过其em box 的高度。

而 content box 的高度就取决于指定 font-size下，em box 的高度 和

实际用于显示字体所占用的高度的较大值(CSS其实并没有指定如果去选择 content box

的高度，只说二选一)。

In nonreplaced elements, the

content area can be one of two things, and the CSS2.1 specification

allows user agents to choose which one. The content area can be the

box described by the em boxes of every character in the element

strung together, or it can be the box described by the character

glyphs in the element.

然后，我们才开始理解什么是行高 line-height。

行 高是一个文本属性，用于定义文本行之间的间隔。我们将设定的行高值与该行文本的

content box 相减，得到的就是 传统排版行业中的 leading。 比如我们定义了 line-height:20px;

font-size:14px 。 我们假设这次选用的字体的 content box 大于 em box，假设是16px。

那么，行高减去content box，就是 4px 的leading。

在CSS中，leading 将会被平分为两部分，一部分附加在 content box

的上方，另一部分在 content box 的下方。 在这个栗子中，将会有2px的 half

leading被分配在上方，另一个2px分配在下方。 那么，现在我们将 content box 外加 上下的 half leading

的这个盒子称为什么呢？

Leading is applied only to

nonreplaced elements。

没错，这就是我们 CSSer 经常会听到的 inline

box——行内框。

inline box is the box

described by the addition of the leading to the content area. For

nonreplaced elements, the height of the inline box of an element

will be exactly equal to the value for line-height. For replaced

elements, the height of the inline box of an element will be

exactly equal to the content area since leading is not applied to

replaced elements.

让我们重新梳理一下思路，

由 定义的 font-size值我们获得了 em box；

由 特定大小的em box 和 特定的字体，我们得到其对应的 content

box；

由 定义的 line-height值 和 确定的 content box值，我们得到了

leading，并进一步确定 half leading；

由 content box 和 上下方的 half

leading，我们得到了 inline box。

附录：

1\the content area is analogous to the

content box of a block-level element.

2\padding, borders and margins on

nonreplaced elements have no vertical effect on inline elements or

the boxes they generate; that is , they do not affect the height of

an element's inline box.

3\padding, borders and margins on replaced

elements do affect the height of the inline box for that element

and, by implication, the height of the line box for the line

containing the element.

将非置换元素的content area 定义为其 margin box

是因为使之可以影响行内布局inline Layout。

2、什么是行

现在我们知道了什么是 inline box，就可以进一步理解什么是 行框——line

box。行框是指正好包含了该文本行中所有的行内框的一个

box，行框的顶部与该行内最高的行内框的顶部对齐，行框的底部与该行内最低的行内框的底部对齐。

那 么行内能够包含哪些 CSS 元素呢。 一般来说，我们最为常见的元素就是文本了。

但是，除了文本之外，替换元素(比如 图片 image、表单输入项 input)也可以出现在行内，另外，我们在CSS定义的

display: inline-block (还有一个 display: run-in)可以出现在行内。

我们知道，对于文本来说，我们才有

font-size、em box、leading、line-height 这些概念。但是对于如 image 又或者是

行内块级元素来说呢，又应该有什么样的机制来处理其 inline box 这个概念呢 ？

CSS规范给出了答案。

对 于替换元素 和 行内块级元素来说， 其 inline box 就是其 margin

box。 也就是说我们通过 image 元素导入一个外部图片时，假设其高度值就是固有高度40px(对于图片来说，在不设定宽度 和

高度的情况下，使用的固有高度)，如果我们对图片的 padding、border 和 margin 都设定为0，其 inline box

就是40px。 这时，我们希望设定其 外边距为 10px，边框为1px，内补白为3px，那么其 inline box 的高度就是

40+(1+3+10)*2 = 68px。

对 于可置换元素来说，其content area 就是其 margin box。

尽管我们可以给置换元素设定 行高 line-height，但是行高本身并不起作用(你可以设置一个超大的行高，比如1234px

测试一下)，但是行高会影响其他的因素，我们将在下一节继续探索。

3、什么是基线

各位看官可能注意到了，我上面的截图中有个基线对齐。

那么，现在也是应该是时候让我们来说说什么是基线的问题了。

这 个概念倒是比较难以解释了，不过我试着用图片来说明。

一般来说，在浏览器中文本的默认的对齐方式就是基线对齐，而上图就是不同大小的字体基线对齐的一个效果。

或者，如果你能记起小时候抄写英文单词时的联系薄的话，里面的四线格中我们选有一个基准线，基线的含义就是从那里得来的。

基线的概念，其实是为了描述英文文本(西方文字)而引入的概念，对于中文文字也有基线的概念，但是一般来说我们并不关注。

还 有一个问题，就是置换元素，比如图片，是没有基线的。

这个我们如果进行垂直方向的对齐呢，CSS规范规定了对于置换元素 或是 行内块级元素来说，与基线有关的对齐方式都使用该元素的

inline box 的底部作为替换。(之后，我们会介绍许多基于基线的对齐方式，所以这些基线对于 置换元素 和 行内块级元素来说，

都使用 inline box 的底部来对齐。)

4、垂直对齐方式

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

基线对齐 baseline：

baseline forces the baseline

of an element to align with the baseline of its

parent.

基线对齐使得一个元素的基线与其父元素的基线相互对齐。

基于基线的其他对齐方式：

sub、super、、

指定了对齐方式的元素的基线与它父元素的基线在垂直方向上的距离。

注意1：sub 和 super 的移动距离 根据

浏览器互有差异，因此CSS规范并没有定义。

注意2：百分比相对于指定元素的 line-height

值，这就是置换元素为什么还是需要指定 line-height 的原因。

注意3：上述四个属性无法用于

table-cell中。

顶部对齐 top ：

top aligns the top of the

element's inline box with the bottom of the line box.

顶部对齐使得元素的行内框顶部 与

当前行框的顶部对齐。

底部对齐 bottom： 略

文本顶部对齐 text-top:

the top of the aligned

element's inline box is aligned with the top of the default text

box.

(this default box is derived from the font-size

of the parent element)

文本顶部对齐将指定元素的行内框的顶部与默认文本框的顶部对齐(默认文本宽源于父元素的字体大小属性)

注意1：默认文本框在 最新的FF下测试结果 就是文本的 content

area。

注意2：文本对齐无法用于 table-cell 中。

文本底部对齐 text-bottom ： 略

居中对齐 middle :

middle aligns the middle of an

inline element's box with a point that is 0.5ex(x-height) above the

baseline of the parent element.

居中对齐使得行内元素的垂直中点与父元素基线上移0.5个单位的ex处对齐。(ex 指

x-height)

注意1：由于许多浏览器不能职能计算ex的高度，常使用 ex

= em * 0.5来近似处理，因此可能跟预期有出入；

“居中x”三个字所在行内框的中点位于图中线条上，最右侧的"xxx"是参考。