role

To be honest, the vertical-align attribute is one of the early adopters of the front-end. At first I thought it corresponded to text-align, one setting text landscape and one setting vertical. Of course, it has long been known that this understanding is wrong. But I never really understood how vertical-align works.

Vertical-align sets the alignment of the inline elements. The display attribute is inline, inline-block, inline-table and a table-cell element.

Set up the

What are the values that you can set? Before we do that, let’s get a few ideas, or we’ll get confused.

1. Baseline correlation

The location of the baseline is not fixed:

  • In inline elements such as text, the baseline is the position of the lower edge of character X

  • In elements like IMG, the baseline is the bottom edge.

  • There are also two cases in inline-block elements

    1. If there are inline elements in the element, the baseline is the baseline for the last inline element in the row.

    2. If the element has no inline elements or overflow is not visible, its baseline is the ground edge of the margin.

Once you understand the concept of baselines, let’s look at baseline-related Settings:

  • Baseline: the default value, baseline alignment
<div style="background: green">
	x
	<img src="./man_active.png">
	<span style="display: inline-block;">vertical</span>
	<span style="display: inline-block; overflow: hidden; height: 80px;">123</span>
</div>
Copy the code

The bottom edge of the x character, bottom edge of the IMG element, and inline-block elements with content are all aligned. Figure 2 shows that overflow is not visible and the baseline of the inline-block element is the bottom edge of the margin. If you look carefully, you can see why there is a gap at the bottom, because the third element baseline is aligned, but the baseline is not the base of the element. So the bottom is stretched by the default row height.

  • Sub: The element’s baseline moves down

  • Super: The element’s baseline moves up

  • The specific length value

If it’s positive, the baseline moves up, if it’s negative, the baseline moves down.

<div style="background: #398dee">
	<span style="vertical-align: -10px""> <span style=" max-width: 100%; clear: both; min-height: 1em"vertical-align: 10px"</span> </div>Copy the code

  • Percentage values: As with length values, the value you need to know is the percentage of the line height.
<div style="background: #398dee; line-height: 50px">
	<span style="vertical-align: -10%""> <span style=" max-width: 100%; clear: both; min-height: 1em"vertical-align: 10%;"</span> </div>Copy the code

Try adjusting the height of the row and you will find that the greater the row height, the greater the distance you move.

2. Boundary correlation

  • Top :(inline) the top edge of the element is aligned with the top edge of the highest element in the row
<div style="background: #398dee; padding-top:20px">
	<span style="font-size: 30px">x</span>
	<img src="./man_active.png" style="margin-top: 30px">
	<span style="color: red; vertical-align: top;">top</span>
</div>
Copy the code

Align with the top edge of the highest element, not the top edge of the row. Because the padding-top of the row is not at the top; 2. The top edge of the highest element includes margin. If you look at the picture, you can see that maigin-top is also included. The image clearly shows that the top of the “top” does not align with the top of the image. Remember that the top element has a row height. The top of the element is not the top of the letter.

  • Bottom: Aligns the bottom edge of the element with the bottom edge of the row.

  • Middle: The center point above and below the element is 1/2 up from the line baselinexAlign the height position of the.
<img src="./man_active.png">
<span style="color: red; vertical-align: middle;">middle</span>
Copy the code

Middle is not in the middle as we understand it, it’s close. And it’s offset by the font size.

<span style="font-size: 30px">x</span>
<span style="color: red; vertical-align: middle;">middle</span>
Copy the code

  • Text-top: Aligns the top edge of the element with the top edge of the parent’s content area
<div style="background: #398dee; padding-top: 20px">
	<span style="background-color: red;">text-top</span>
	<img src="./man_active.png" style="vertical-align: text-top;">
</div>
Copy the code

  • Text-bottom: Align the bottom of the element with the bottom of the parent’s content area