Vertical-align and Line-height

Line-height is calculated relative to Font-size, the percentage value of vertical-align is calculated relative to Line-height, Vertical-align is baseline by default;

Demo

font-size:20px;

line-height:1.2;

The value of line-height is actually 1.2*20=24px;

Demo

line-height:20px;

vertical-align:30%;

Vertical-align equivalent to 6PX

vertical-alignand line-height的 relationships start with the HTML5 document declaration, so the following discussion is in the context of the page HTML5 declaration, similar to the following DOCTYPE:

<! DOCTYPE HTML > < HTML >

For inline elements, vertical-align and line-height, though invisible, are actually "everywhere"!

For example:

If you wrap an IMG element in the DIV, you will see that there is a blank space underneath the IMG because:

The behavior of inline elements inside a block element is as if there is one inside of the block element (more likely two-before and after) cannot see the blank node without the width and no entity, the default value of Vertical-align is baseline, the picture is aligned with the baseline of the blank node, So there is a blank node;

Baseline Introduction:

In all kinds of inline related models, the most basic baseline () can be separated from the vertical direction of the typesetting or alignment. baseline For example, the line-height definition of row height is the spacing between the two baselines, vertical-align the default is the baseline, and the other definition of the top line is inseparable from the baseline;

The lower edge (line) of the letter x is our baseline.

CSS has a concept called "x-height" , refers to the height of the letter ‘x‘ .

vertical-align: middle：middle指的是基线往上1/2 "x-height"高度。我们可以近似脑补成字母x交叉点那个位置。

vertical-align: middleis not an absolute vertical center alignment, the effect we normally see is middle just a similar effect. The reason is simple, because different fonts, their position in the box in the line is not the same, for example, ' Microsoft Ya Black ' is a character drop more obvious font, the location of all characters than other fonts to a lower point. If the vertical-align: middle line alignment is relative to the container, hehe, you will find that the icon and the text are not on a line, but with respect to x the center of the character alignment, we have the naked eye as if it is aligned with the text center.

exis a relative unit of CSS, which refers to the height of the lowercase letters, x Yes, that means "x-height" .

exValue: The vertical center alignment effect of inline elements that are unaffected by font size.

Inline elements are baseline aligned by default, and the baseline is x the bottom, and 1ex x the height is one. Imagine, if we are the height of 1ex the icon, and the background image is centered, not the icon and text is naturally vertical center, and, completely unaffected by the font and size. Because it ex is a unit relative to the font size.

Although the use of ex height to achieve natural vertical alignment looks very clever, but there are limitations, that is, if the height of the icon background exceeds 1ex , we can only use due to the vertical-align。 ie6-ie7 of the internal model of the interpretation of the problem, therefore, all kinds vertical-align of There are problems under these browsers, including the ex natural baseline alignment here, which requires special handling.

Let Vertical-align fail:

1 Modifying the value of vertical-align to non-baseline

2 inline element block-level

3 Setting element positioning position

4 Set Element float float

5 Sets the parent element font-size=0 (if the element's line-height is a relative value), eliminating the effect of whitespace node line-height

To implement the vertical centering of the IMG tag:

Because there are white space nodes, you can set the height of the parent element by setting Line-height, Line-height can only function on characters to have a height

1 line-height Setting the height of the parent element

2 Set the IMG vertical-align to middle. This time the IMG is approximately vertically centered because of the effect of the white space node, when actually the baseline of the Appetite blank node is aligned

3 Setting the parent element font-size=0; Eliminating the effect of whitespace nodes implement IMG completely vertically centered

This line-height vertical-align:middle method of vertical centering of elements is not only suitable for modern browsers, but also supported by IE7 browsers.

However, there are some things to keep in mind when working with other browsers, that is, HTML cannot:

< Div ><  src= "mm1.jpg"></div>

Instead, you need to leave a space at the end of the picture label, which wraps:

< Div ><  src= "mm1.jpg"><!----</ Div >

From: http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

Vertical-align and Line-height