How to correctly use CSS in Vertical-align

First, it is clear that vertical-align only works on inline-block and inline elements.

Before you say vertical-align, you need to explain what a line box is.

The line displayed in the browser contains multiple non-block elements (line breaks when there is a block element), and a box can be used to include this line, which is a lines box.

such as a Div, he will occupy a row, wrapped inside all non-block elements of a line box.

The height of the line box is the height of the element with the highest row height in the bank.

At this point, setting the Vertical-align value for the non-block element with the highest row height will directly affect the Bank's baseline position (which can be said to set the bank's baseline position), and when the other non-block elements in the bank are set vertical-align, are displayed relative to the bank's baseline position.

Example:

<Divstyle= "height:100px;width:100px;border:1px solid black;">    <spanstyle= "display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>    <spanstyle= "vertical-align:top;">2</span>    <spanstyle= "Vertical-align:middle;">3</span>    <spanstyle= "Vertical-align:bottom;">4</span></Div><Divstyle= "height:100px;width:100px;border:1px solid black;">    <spanstyle= "display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>    <spanstyle= "vertical-align:top;">2</span>    <spanstyle= "Vertical-align:middle;">3</span>    <spanstyle= "Vertical-align:bottom;">4</span></Div><Divstyle= "height:100px;width:100px;border:1px solid black;">    <spanstyle= "display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>    <spanstyle= "vertical-align:top;">2</span>    <spanstyle= "Vertical-align:middle;">3</span>    <spanstyle= "Vertical-align:bottom;">4</span></Div>

Will find the display as shown.

1 has the highest span height, so the vertical-align it sets will directly affect the bank's baseline position. Adjust the order in which the span of 1 is present, and the result is the same.

<Divstyle= "height:100px;width:100px;border:1px solid black;">    <spanstyle= "vertical-align:top;">2</span>    <spanstyle= "Vertical-align:middle;">3</span>    <spanstyle= "Vertical-align:bottom;">4</span>    <spanstyle= "display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span></Div><Divstyle= "height:100px;width:100px;border:1px solid black;">    <spanstyle= "vertical-align:top;">2</span>    <spanstyle= "Vertical-align:middle;">3</span>    <spanstyle= "Vertical-align:bottom;">4</span>    <spanstyle= "display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span></Div><Divstyle= "height:100px;width:100px;border:1px solid black;">    <spanstyle= "vertical-align:top;">2</span>    <spanstyle= "Vertical-align:middle;">3</span>    <spanstyle= "Vertical-align:bottom;">4</span>    <spanstyle= "display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span></Div>

Another example:

Used in a block element

#parent:: Before or #parent::after

{

Content: ";

Display:inline-block;

height:100%;

Vertical-align:middle;

}

It is also the above principle that the non-block elements in the #parent can be centered vertically.

How to correctly use CSS in Vertical-align