Preparation phase
Vertical-align Value and Meaning:
Value |
Meaning |
Baseline |
Default. element is placed on the baseline of the parent element. |
Top |
Aligns the top of the element with the top of the highest element in the row |
Text-top |
Aligns the top of the element with the top of the parent element's font |
Middle |
Place this element in the middle of the parent element. |
Text-bottom |
Aligns the bottom of the element with the bottom of the parent element's font. |
Bottom |
Aligns the top of the element to the top of the lowest element in the row. |
Sub |
Subscript for vertical alignment of the aligned right. |
Super |
Superscript of vertical aligned aligned |
% |
Use the percent value of the "Line-height" property to arrange this element. Negative values are allowed. |
Length |
Align vertically, negative values downward, positive values upward |
Inherit |
Specifies that the value of the Vertical-align property should be inherited from the parent element. |
Note: The Vertical-align property is only valid for inline elements (inline/inline-block).
Top/text-top/middle/baseline/text-bottom/bottom
Use the vertical position that describes the six properties:
The next step is to verify:
The test code is as follows:
<style>. Refer{Color:#fff;font-size:32px;Line-height:64px;background:#000;Height:100px; }. Vertical{font-size:16px;Line-height:16px;Display:Inline-block;width:150px;Height:20px;Border:1px solid #fff; }</style><Divclass= "Refer">line-height:64px<spanclass= "vertical"style= "Vertical-align:top">Top</span> <spanclass= "vertical"style= "Vertical-align:text-top">Text-top</span> <spanclass= "vertical"style= "Vertical-align:middle">Middle</span> <spanclass= "vertical"style= "Vertical-align:baseline">Baseline</span> <spanclass= "vertical"style= "Vertical-align:text-bottom">Text-bottom</span> <spanclass= "vertical"style= "Vertical-align:bottom">Bottom</span></Div>
The effect is as follows:
The following conclusions can be drawn from the above three graphs:
1, top: Align the top of the element with the top of the highest element in the row
2. Bottm: Aligns the bottom of the element with the bottom of the lowest element in the row
3. Text-top: Aligns the top of the element with the top of the parent element's font
4. Text-bottom: Aligns the bottom of the element with the bottom of the parent element's font
5. Middle: Place the element in the middle of the parent element
6. Baseline: The bottom of the element content is placed on the baseline of the parent element (default value)
Note: use red text to indicate who is referring to WHO
Super/sub
The test code is as follows:
<Div>referential<sup>Superscript</sup> <spanstyle= "Vertical-align:super">Superscript</span></Div><Div>referential<Sub>Subscript</Sub> <spanstyle= "Vertical-align:sub">Subscript</span></Div>
As follows:
From the conclusion that can be drawn:
1. Super: Align the bottom of the element content with the bottom of the parent element text superscript
2. Sub: Aligns the bottom of the element content with the lower end of the parent element text subscript
length/%
The test code is as follows:
<Div>referential<spanstyle= "vertical-align:10px">vertical-align:10px</span> <spanstyle= "vertical-align:-10px">vertical-align:-10px</span></Div>
As follows:
From the conclusion that can be drawn:
1, Length: The element is based on the original position , the vertical direction of movement, can take positive negative value
2,%: The element takes the original position as the datum, the value takes the parent element's line-height attribute as the datum, the vertical direction movement, may take the positive and negative value (if the parent element's line-height:0; Set Vertical-align also no effect)
Vertical-align Property