1. vertical-align 基础
先看 MDN 给的定义
The vertical-align CSS property specifies sets vertical alignment of an inline or table-cell box.
The vertical-align property can be used in two contexts:
Note that vertical-align only applies to inline and table-cell elements: you can't use it to vertically align block-level elements.
2. table-cell 中使用 vertical-align
还是看 MDN 的定义
In European and West Asian typography and penmanship, the baseline is the line upon which most letters "sit" and below which descenders extend. In the example to the right, the letter 'p' has a descender; the other letters sit on the (red) baseline.
Northern Brahmic scripts have a characteristic hanging baseline; the letters are aligned to the top of the writing line, marked by an overbar, with diacritics extending above the baseline.
East Asian scripts have no baseline; each glyph sits in a square box, with neither ascenders nor descenders. When mixed with scripts with a low baseline, East Asian characters should be set so that the bottom of the character is between the baseline and the descender height.
In typography, the mean line, also called the midline, is half the distance from the baseline to the cap height. This may or may not be the x-height, depending on the design of the lower case letters. A very high or very low x-height may mean that the midline is above or below the x-height. Round glyphs will break (overshoot) the mean line slightly in many typefaces, since this is aesthetically more pleasing; a rounded shape will appear visually smaller than flat-topped (or bottomed) shapes of equal height, due to an optical illusion.
3.3. Cap height：
In typography, cap height is the height of a capital letter above the baseline for a particular typeface. It specifically is the height of capital letters that are flat—such as H or I—as opposed to round letters such as O, or pointed letters like A, both of which may display overshoot.
Typically, this is the height of the letter x in the font (the source of the term), as well as the v, w, and z. (Curved letters such as a, c, e, m, n, o, r, s, and u tend to exceed the x-height slightly, due to overshoot.) One of the most important dimensions of a font, x-height is used to define how high lower-case letters are compared to upper-case letters.
Overshoot is the degree that capital letters go below the baseline or above the cap height, and lowercase letters go below the baseline or above the mean line. In typeface design, the overshoot of a round or pointed letter (like O or A) is the degree to which it extends higher or lower than a comparably sized "flat" letter (like X or H), to achieve an optical effect of being the same size; it compensates for inaccuracies in human visual perception. Formally, it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height. For example, the highest and lowest extent of the capital O will typically exceed those of the capital X. Although the extent of overshoot varies depending on the design and the designer, perhaps 1% to 3% of the cap or x-height is typical for O. Peter Karow's Digital Formats for Typefaces recommends 3% for O and 5% for A.
The name em was originally a reference to the width of the capital M in the typeface and size being used, which was often the same as the point size.
leading = line-height - font-size 其中一半leading加到文字上方，另一半leading加到文字下方。
4. IFC（Inline formatting contexts）
An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows: 译：IFC 中，浏览器会将 行内级盒子在水平方向上一个接着一个摆放，每一行形成一个 行盒子，行盒子则会进一步在在竖直方向上堆叠。
译：对于每个行内级元素的高度：替换元素的高度由margin-box决定；行内元素的高度则有 line-height 决定。
译：行内级元素在竖直方向上的对齐方式由 vertical-align 指定。但必须在满足所有的对齐条件下，保持行盒子的高度最小。
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'.
Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box.
A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.
—— https://www.w3.org/TR/CSS22/visuren.html#inline-boxes 9.2.2
Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.
—— https://www.w3.org/TR/CSS22/visuren.html#inline-boxes 188.8.131.52
Block-level elements – those elements of the source document that are formatted visually as blocks (e.g., paragraphs) – are elements which generate a block-level principal box. Values of the 'display'property that make an element block-level include: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
In CSS 2.2, a block-level box is also a block container box unless it is a table box or the principal box of a replaced element. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.
An element whose principal box is a block container box is a block container element. Values of the 'display' property which make a non-replaced element generate a block container include 'block', 'list-item' and 'inline-block'.
Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but are not block-level. Block-level boxes that are also block containers are called block boxes.
—— https://www.w3.org/TR/CSS22/visuren.html#inline-boxes 9.2.1
5. 深入 vertical-align？
再看一遍 MDN 的定义
To vertically align an inline element's box inside its containing line box. 译：用于在竖直方向上对齐 行盒 中的 行内元素盒。
CSS 2.2 does not define the position of the line box's baseline.
The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height.
最后来两个 vertical-align 的经典示例
《CSS 权威指南》 《CSS 世界》 《CSS 核心技术详解》 MDN 中 vertical-align 的定义： https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align CSS2.2 中 vertical-align 的定义： https://www.w3.org/TR/CSS22/visudet.html#propdef-vertical-align vertical-align 相关的优秀文章： http://phrogz.net/css/vertical-align/index.html https://christopheraue.net/design/vertical-align https://christopheraue.net/design/centering-inline-block-with-vertical-align-middle https://christopheraue.net/design/why-vertical-align-is-not-working
原文发布于微信公众号 - WebJ2EE（WebJ2EE）