CSS:vertical-align 那些事

1. vertical-align 基础

是不是用过 vertical-align?



图: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:

  • To vertically align an inline element's box inside its containing line box.
  • To vertically align the content of a cell in a table.

Note that vertical-align only applies to inline and table-cell elements: you can't use it to vertically align block-level elements.


  • 不适用于 “块级元素”;
  • 适用于设置 table-cell内容的垂直对齐方式;
  • 适用于设置inline elememts's boxline-box中的垂直对齐方式;

2. table-cell 中使用 vertical-align

还是看 MDN 的定义

—— https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#Values_for_table_cells




  1. top、middle、bottom,就是在垂直方向上与 cell 的 top、middle、bottom 对齐;
  2. baseline 是指 cell 的 baseline 与 row 中其他 cell 所对齐的 baseline 对齐;
  3. 至于 row 的 baseline 在哪?为什么会变?继续往下看;

3. 字体设计



3.1. baseline(基线):

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.

—— https://en.wikipedia.org/wiki/Baseline_(typography)

3.2. meanline(中线):

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.

—— https://en.wikipedia.org/wiki/Mean_line

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.


3.4. x-height:

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.

—— https://en.wikipedia.org/wiki/X-height

3.5. Overshoot:

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.

—— https://en.wikipedia.org/wiki/Overshoot_(typography)

—— https://slate.com/human-interest/2015/04/tobias-frere-jones-explains-the-optical-illusion-that-tricks-our-brains-into-perceiving-typeface-letters-are-of-equal-height.html

3.5. EM:

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.

—— https://en.wikipedia.org/wiki/Em_(typography)

3.5. line-height、leading:

leading = line-height - font-size 其中一半leading加到文字上方,另一半leading加到文字下方。

—— http://www.ituring.com.cn/article/18076



baseline、x-height 等基本概念


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.

  • IFC 由 不包含块级元素块容器盒子 建立(只有行内级元素)。
  • IFC中,盒子水平放置,一个接着一个,从包含块的顶部开始。
  • 水平方向的 margin、border、margin 放置于这些盒子之间;
  • 这些盒子在竖直方向有不同的对齐方式(bottom、top、baseline);
  • 包含一整行盒子的矩形区域叫做行盒

—— https://www.w3.org/TR/CSS22/visuren.html#inline-formatting


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 中,浏览器会将 行内级盒子在水平方向上一个接着一个摆放,每一行形成一个 行盒子,行盒子则会进一步在在竖直方向上堆叠。

  • The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.

译:对于每个行内级元素的高度:替换元素的高度由margin-box决定;行内元素的高度则有 line-height 决定。

  • 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 指定。但必须在满足所有的对齐条件下,保持行盒子的高度最小。

  • The line box height is the distance between the uppermost box top and the lowermost box bottom.


  • Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.


—— https://www.w3.org/TR/CSS22/visudet.html#line-height



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


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


IFC 中每一行的行高如何计算

5. 深入 vertical-align?

再看一遍 MDN 的定义

To vertically align an inline element's box inside its containing line box. 译:用于在竖直方向上对齐 行盒 中的 行内元素盒。



  • baseline:行内元素盒的基线与行盒的基线对齐;
  • sub:行内元素盒的基线相对于行盒的基线,偏下一点(偏多少浏览器说了算);
  • super:行内元素盒的基线相对于行盒的基线,偏上一点(偏多少浏览器说了算);
  • middle:行内元素盒的中心相对于行盒的基线,偏上1/2 x-height



CSS 2.2 does not define the position of the line box's baseline.

—— https://www.w3.org/TR/CSS22/visudet.html#line-height

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.

—— https://www.w3.org/TR/CSS22/visudet.html#line-height














最后来两个 vertical-align 的经典示例

6. 示例1:模拟ul、li



7. 示例2:模态弹框居中




《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)





0 条评论
登录 后参与评论