Vertical – align function
Display inline, inline-block, inline-table, table-cell (< TD >
)
The lines and heights of the inline elements
Pictures from: www.zhangxinxu.com/wordpress/2…
From its
The ascent in the graph
The height of the ascender line and the small piece at the top of the box is the ascender height
downlink
The descent in the graph
Descender height is the descender height along with the lower portion of the box
The baseline
Baseline, the red line in the figure, is at the bottom of the character X
The midline
So median, which is the bottom of x, is the line that goes up by another x-height.
Middle means 1/2 “x-height” above the baseline. You can think of it roughly as where the letter X crosses.
Vertical-align: middle = middle; vertical-align: middle = middle The reason is simple, because different fonts have different positions in the inline box. For example, ‘Microsoft Yahei’ is a font with obvious character sinking, and all characters are positioned a little lower than other fonts. If vertical-align: middle is aligned relative to the container, you will notice that the icon is not aligned with the text, but with the center of the character X, which looks as if it is aligned with the text to our eyes.
Line heightline-height
The most is the distance between two lines of characters between baseline and baseline, actually is also a center line and the distance between the center line, is also up line and the distance between the up line, think how to say how to say, the height is the same
So I read it this way: the row height is the height of the upline + the height between the upline and the downline + the height of the downline
So, when a box height=line-height, the text is vertically centered
When the line height is less than height, the text is tilted upwards.
When the line is taller than height, the text appears downward.
Vertical – the align attribute values
Manipulate table cells
If it is operation cell TD, the value of the table cell
Top: Aligns the upper edge of the inner margin of the cell with the top of the row. (The upper edge of the box model’s content)
Middle: Aligns the cell margin box model in the middle of the row. (The middle of the box model’s content)
Bottom: Aligns the lower edge of the inner margin of the cell with the bottom of the row. (The bottom of the box model’s content)
Inline element value
Tip has no baseline element and uses the lower edge of the margin instead.
baseline
Aligns the element’s baseline with the parent element’s baseline.
sub
Aligns the element’s baseline with the subscript baseline of the parent element.
super
Aligns the element’s baseline with the superscript baseline of the parent element.
text-top
Aligns the top of the element with the top of the font of the parent element.
text-bottom
Aligns the bottom of the element with the bottom of the font of the parent element.
middle
Aligns the middle of the element with the baseline of the parent element plus half of the x-height of the parent element.
length
Aligns the element’s baseline to a given length above the parent element’s baseline. It could be negative.
1. Positive: The baseline moves up
2. Negative value: Baseline moves down
percentage
The given percentage that aligns the element’s baseline above the parent element’s baseline, which is the percentage of the line-height attribute. It could be negative.
1. Positive: The baseline moves up
2. Negative value: Baseline moves down
Example to understand
Distinguish the line element baseline from the line element baseline
1. The baseline of elements in the line: it is the bottom edge of the letter X, the red line baseline mentioned above. There is a certain distance between the baseline and the bottom line of elements, which is reserved for the space of letters or Chinese characters with tails, such as J, Y, G and so on
2. The baseline of the element’s row: The line on which the baseline element of the row is aligned. Treat the row of the base element as its parent, that is, the baseline of the row is determined by one of its children, the base element.
The baseline of the row is the midline of the base element if it is midline aligned, and the top line if it is top-line aligned.
So, the parent element’s baseline is the line on which the base element is aligned.
In addition, according to whether there is a vertical-align attribute, there are also three cases
(1) If vertical-align is not added for all elements, the default is the baseline alignment of the base element.
(2) The base element is added with vertical-align, while other inline boxes on the same line are not. If the base element is aligned with the top line, the baseline of the line is the center line of the base element.
(3) When the base element is not added with vertical-align, another inline box on the same line is added, the default line alignment of the base element is used to add the vertical-align attribute to the inline box. If other elements are aligned vertical-align: top, align the top line of the base element, if bottom, align the bottom line, and so on
(4) The base element and the other inline boxes in the same row are added with a vertical-align attribute. This is the same as in the third case. Since the base element is the highest, it will be the same no matter how it is aligned. The midline is the midline, the upper pair is the upper pair, and so on
Base element
The highest inline box in the same line is the reference element for that line.
If the inline-box has no text, there is no baseline, and the default baseline position is at the edge of the lower margin, which is the bottom of the element if there is no margin.
If there is text, the baseline is the aforementioned red line baseline, which is the bottom of the letter X.
How the parent element baseline is computed
By default, the vertical alignment of inline elements is baseline alignment
-
When there is no text, see the following figure
- Yellow and green are inline boxes that default to the line’s baseline alignment
- The baseline for this row is the yellow baseline (because it is the highest in this row and is the base element for this row).
- Yellow, because it has no text, does not have a baseline by default, so its bottom margin is used as the baseline
- So the green box is aligned with the baseline of the yellow block (the baseline element of the line), which itself is aligned with the baseline by default, and since it is also an inline box without text, the default baseline is also the outermost edge of its bottom margin. The result is the following layout.
Font-size: 0; font-size: 0; Can remove
<style>
.father {
width: 300px;
border: 1px solid green;
font-size: 0;
}
.son1 {
display: inline-block;
width: 50px;
height: 100px;
background-color: yellow;
margin-bottom: 10px;
}
.son2 {
display: inline-block;
width: 50px;
height: 20px;
background-color: blue;
}
</style>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
Copy the code
<style>
.son1 {
display: inline-block;
width: 50px;
height: 100px;
background-color: yellow;
margin-bottom: 10px;
}
</style>
Copy the code- When there is text, it is shown in the figure below
- Both yellow and blue are inline boxes that default to the line’s baseline alignment
- The baseline for this row is the yellow baseline (because it is the highest in this row and is the base element for this row).
- Yellow has text, and the default baseline is the letter mentioned above
xSo the baseline for our line is going to beSon1The baseline - So the green box is aligned with the baseline of the yellow block (the baseline element of this line), and the default baseline is aligned with the baseline because the green box also has text, so the default baseline is also the baseline of the text. The result is the following layout.
<style>
.father {
width: 300px;
border: 1px solid green;
color: red;
}
.son1 {
display: inline-block;
width: 80px;
height: 100px;
background-color: yellow;
}
.son2 {
display: inline-block;
width: 80px;
height: 20px;
background-color: blue;
}
</style>
<body>
<div class="father">
<div class="son1">Son1</div>
<div class="son2">Son2</div>
</div>
</body>
Copy the code3. Use vertical-align to center SON2 vertically
Son1 = vertical-align: middle; son1 = vertical-align: middle; But son2 is in the middle. Why is that?
We also follow the above step by step analysis:
- Son1 and SON2 are inline boxes that default to the line’s baseline alignment
- The baseline element for this line is the yellow block (because it is the highest), and the yellow block has text, so the baseline is the baseline of the text, aligned with the baseline by default
- However, the alignment of SON1 (the base element) was modified proactively
vertical-align:middle, so the alignment of the entire line is midline aligned with SON1 (the reference element). - So son2’s baseline aligns the middle line of SON1 (the reference element in the row), resulting in the following effect.
In fact, SON2 is not completely in the middle, it is a little bit up, because son2’s baseline is the text’s baseline, a little bit down, so to achieve complete center effect, we can also add a vertical-align: middle on son2
Actual combat: Use false elements andvertical-align: middleAchieve vertical center
<style>
* {
margin: 0;
}
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.child {
background: blue;
width: 100px;
height: 40px;
line-height: 40px;
color: #fff;
display: inline-block;
vertical-align: middle;
}
.parent::before {
content: ' ';
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
Copy the code
Analysis of the middle principle:
- Added an after pseudo-element to parent, which makes the pseudo-element sibling to child
- The pseudo-element after is set to inline-block, the height is set to the height of the parent element, and the child is set to inline-block
- The pseudo-elements after and child become inline boxes on the same line
- The default is the baseline alignment of the base element (that is, the pseudo-element after, because it is high)
- Because the pseudo-element is set
vertical-align: middleProperty, so the entire line is aligned with the center line of the pseudo-element - The default baseline for a normal line element is the baseline for child because it has words
verticle-align: middle - Align the center line of the child with the center line of the base element, resulting in a vertical center
Reference:
www.jianshu.com/p/ce7e4a997…
www.jianshu.com/p/59f31a170…
Juejin. Cn/post / 684490…
Developer.mozilla.org/zh-CN/docs/…
www.zhangxinxu.com/wordpress/2…