css - vertically aligned
Non-native row within the block
For convenience of description, we converted to elements within the line block non-native called inline block elements
Single-line / multiple-line element
Before learning vertical alignment, elements displayed on the need to first separate the two line concept, a single line element, the other is a multi-line element. Single line element has: input, button, span, a like element has a plurality of rows: row non-native in the block, textarea, img like. And we know that top-line element is the top, the bottom line is the bottom, the middle section is one, but the baseline in the css there is a strange explanation.
Baseline single-line elements
1. The single line input box input: Baseline = Baseline in the text input box
2. button (input button or button): Baseline = Baseline button text
3.span other inline elements: Baseline = Baseline Text
4. Plain text: text = Baseline Baseline
Baseline multi-line elements
1. Picture: Baseline = bottom = Bottom
1. The multi-line input box textarea: Baseline = bottom = bottom
2. contain no non-native in the row block elements (e.g., div, span): Baseline = bottom = bottom,
3 contains the contents of the non-native row block elements (e.g., div, span): baseline = the last row of the content comprising a baseline, if you want it to its own baseline is the bottom line, which can be set overflow: hidden
From the above we can see that the baseline is the baseline single-line elements of the text, and multi-line elements of the baseline is the bottom line, rather than the native-line within a block if it contains content, the baseline is the baseline of its last line of
line box of four lines
Line is a line box, and a plurality of juxtaposed elements on a single line, each element is called an inline box. line box has four lines: top = top line, the line x = line invisible, hidden x = baseline baseline (baseline = x invisible bottom line), the bottom row = the highest inline box bottom.
Stealth x
X stealth concept belongs forgery, but it helps to understand vertical-align the alignment pattern.
If there's a high 500px div, it may have only a single line or multiple lines, depending on the design, however, it also has the lowest row. And each row is a line box, each line box has a hidden x. Vertical-align the alignment line box are four lines to be offset vertically, so the first time being in mind the concept of line box of four lines x and invisible to understand the explanation behind
Invisible x html tag contains not help any child. You can also manually inserted into a text box lowercase x-line, to test the effect of x with the value of each of the vertical-align.
vertical-align application mode
vertical-align some of the characteristics of people very confusing, so a lot of people in the use of this property will find over more surprises. For example, you set the vertical-align for the img on line: middle, you will find this set has also valid for other elements on one line. In fact, you only need to remember, vertical-align: baseline that each element has a default property, if you just set up a non-vertical-align the baseline for a certain element on the line, only this one will be applied to this element the new vertical alignment features, and other elements on the line of application is still baseline! If this is not clear, you will be confused too crazy. Keep in mind that the default baseline! You can manually override the property values, but only explicitly set elements will use the new features of the new value of vertical alignment, other elements do not change, still the baseline.
vertical-align property value
Value: baseline default | px |% | top | middle | bottom | super | sub | text-top | text-bottom
Set to: inline box
Inherited: no
Value: baseline
baseline: at baseline as a reference line box aligned with its own baseline
Value: PX | EM | REM ......
px / em / rem: baseline reference line box is shifted up and down, can be seen as a baseline zero scale, taken up positive offset, a negative offset down to the nearest
Value: %
%: Baseline as a reference line box is vertically offset, the row of high current element *%, the percentage of positive shifts upward, downward negative percentage deviation
Value: Top (top line) | bottom (bottom) | Middle (neutral)
top / bottom / middle: top: a top wire line box as a reference with its own top-line alignment (top line box a), middle: median line invisible x as a reference with its own center line is aligned (when the high row exists, x invisible line will sink to the lower midline line box, the higher the high row, sinking more obvious, this situation is referred to as character sink), bottom: bottom line line box is aligned with its own baseline reference ( line box bottom line is that the highest inline box's bottom line in it)
The figure is set as a yellow div vertical-align: top, the top line of the yellow line box div to align itself with the top line
The figure is set as a yellow div vertical-align: middle, neutral yellow invisible to x div is aligned with its own center line
The figure is set as a yellow div vertical-align: bottom, top div yellow line, the bottom line is the bottom line of its parent element, which is aligned with respect to the baseline of the parent element.
FIG lower row are set to all elements aligned bottom line, yellow line is the highest div, the other elements in its bottom line aligned with their own baseline
取值：super（上标） | sub（下标）
super/sub：以line box的基线为参照进行上标或下标
作用：类似于html的<sub>、<sup>
取值：text-top （所有文本的顶部）| text-bottom（所有文本的底部）
text-top/text-bottom：以一行上的文本为参照进行上下偏移
垂直对齐相关知识的归纳
关于vertical-align的垂直对齐需要特别注意，所谓vertical-align指的就是容器里有多个inline box（哪怕盒子里只有一个inline box，该inline box所在行都有一个line box的基线，都可以设置vertical-align），这些box需要垂直对齐时，它们都是相对于line box的四条线为基准进行上下偏移。总结以上的各个属性值可以得出：
1.baseline：以自身的基线与line box的基线进行对齐
2.px、em、rem、%、sub、super：以line box的基线为参照进行上下偏移
3.top、middle、bottom：以自身的顶线、中线、底线与line box的顶线、中线、底线对齐。
4.text-top、text-bottom：以自身的顶线或底线与一行上的文本的顶部与底部进行对齐
非原生行内块元素的垂直对齐
这里所说的非原生行内块指的是被转换为行内块的div、span等容器元素，它们比较特殊，如果它们没有包含任何内容，则它们的基线就是它们自身的底线，如果它们包含了内容，则它们的基线是它们包含的最后一行内容的基线。
以下设置了两个行内块div元素，它们没有包含任何内容，所以它们的基线就是自己的底线，默认是baseline对齐，效果如图所示
现在往第二个div里插入文本后，发现效果如下图。这是因为第二个div的基线是它包含的最后一行内容的基线。
