Vertical-align Property

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