Cell-box: the minimum frame of the surrounding content.
Baseline of cell-box: generally, it is the first line of text box in the cell-box from the bottom up to 1/4 (about, for personal understanding ).
Baseline of this line: This line vertical-align is all cell-boxes of baseline, the baseline from the top of the cell-box to the cell-box baseline with the maximum distance is used as the baseline (vertical-align: the baseline of the baseline inline-replace element is considered as the bottom of its margin box ).
As shown in the preceding figure, vertical-align of the first two boxes are all baseline. To confirm that the baseline of this line is related to the two boxes. The maximum distance between the baseline of the two cell-boxes to the top of the cell-box is 2, so select the baseline of the 2 as the baseline of this line.
Bottom, top, and middle are simple. Use the bottom, top, and middle of cell-box to align with the row.
The above is case 1. The following is Case 2.
Used
Inline-level elements(Concept 1) affects its vertical position in its line-box.
Line-box(Concept 2) the height is calculated by the inline-level element. The inline-replace element is the height of its margin box, and the no-replace element is its line-height.
The two objects used for alignment are line-height box (or margin box) and line-box.
Baseline: the baseline of line-height box (or margin box) is aligned with the baseline of line-box. The baseline of the line-height box is the last line of text in the box from bottom to top 1/4 (bottom of e). The inline-replace element cannot find the baseline, use the bottom line of its margin box as baseline.
Baseline of line box is calculated as follows: line-height boxes and margin boxes of all vertical-align: baseline (which is also baseline by default) in line box are involved in calculation, another hypothetical box (strut) has two attributes: font and line-height. The values of these two attributes can be inherited. Calculate the baseline distance from each box to the top of the box. The baseline of the box with the highest distance is used as the baseline of the line box (similar to the baseline calculation of the rows in the table-cell above ). Then, align with the corresponding position. The line box height may be changed during the alignment.
Middle: The center of the inline-height box (or margin box) is aligned with the baseline of the line box and then the distance between the x Center (
Font-sizeIn general, we intuitively think that the middle is right ).
Bottom, top: simple, top-to-top, bottom-to-bottom.
Text-top, text-bottom: top-to-text, bottom-to-text.
Sub, super: align with basline, and then drop and raise the box separately.
Value: adjusted relative to baseline.
Percentage: relative
Line-heightCalculate the value and adjust it relative to baseline.
There are two clear cases: understanding two concepts, understanding two related attributes, and adding a core understanding of baseline computing, vertical-algin is almost the same.
For related applications
Vertical center of an image with an indefinite height:
Code:
<Div style = "border: 1px solid # CCC; height: 200px;"> <span style = "width: 1px; display: inline-block; margin-right:-1px; height: 100%; vertical-align: middle; "> </span> </div>
