(Translation) About Vertical-Align: What you need to know_html/css_WEB-ITnose

Many times, I always need to vertically align a row of elements. Before, I usually used float and sometimes position: absolute. I had no choice but to set margin or padding.

I really don’t like the methods above. Float can only align a row of elements at the top. If you want to align vertically, you need to adjust it separately. position:absolute takes elements out of the document flow so that they cannot affect surrounding elements. Setting margin or padding makes css inelegant.

But vertical-align shines in my eyes and I think it deserves more attention. Technically speaking, using vertical-align layout is a hack, because it was not born to solve this problem. It was originally used to align text and text next to elements. Nevertheless, vertical-align allows us to flexibly and fine-grained align elements in different contexts, because there is no need to know the size of the elements, and all elements are still in the document flow.

Conditions for using Vertical-Align

Vertical-align is used to align inline elements, which means it acts on these display attributes inline, inline-block, inline -table (not discussed in this article).

inline-block As the name suggests, block-level elements are inside inline elements. Elements can have width, height, border, margin, padding.

On the other hand, inline elements will be arranged one after another. Together, as long as there is room for inline elements on the current line. If there is no space then create a new line below. These inline elements are called line boxes.

The line box contains all the content of a row. The size of the elements in a row will affect the height of the line box. The picture below shows how the top and bottom of the line box are defined. The space between the two red lines represents a line box. >

Outer Edges

)

The most important reference points for vertical alignment line box involve the baseline of the element and in some cases the top and bottom edges of the element box model Edges are very important. The following figure allows us to intuitively see the baseline and outer edges of the elements involved The red line represents the top and bottom edges of the line-height, and the green line represents the height of the text (font -size), the blue line is the baseline.

In the picture on the left above, line-height is equal to font-size, so the red line and the green line overlap. The line-height of the middle picture is twice the font-size, and the line-height of the right picture is 1/2 of the font-size.

The outer edges of the inline elements will be aligned with the top and bottom edges of the line-height , in the picture on the right above, the outer edge of the inline element is still a red line, although the line-height is smaller than the font height.

In addition, you can see that the baseline of the inline element is lower than half the font height.

inline-block element

From left to right, the inline-block element contains in-flow (not out of the document flow) content. The inline-block element has in-flow content but overflow:hidden, and the inline-block element has out-flow content (the content area has a height). The red line represents the edge of margin, the yellow line is border, the green line is padding, the content is the blue area, and the blue line is baseline.

The outer edge of the inline-block element is its margin -Top and bottom edges of the box.

As you can see, the baseline of an inline-block element depends on whether the element has in-flow content.

The baseline in the left picture above is the baseline of the previous content element. This content element determines its own baseline according to its own situation.

In the middle picture, the overflow attribute is set to non-visible, and the baseline is inline. -The bottom edge of the margin-box of the -block element, which is its own bottom edge.

The baseline in the right image is still the bottom edge of its margin-box.

Line Box

From the above you can clearly see the differences in several attribute values ​​of vertical.

<span class="center">    <span class="middle bg-grey">This</span>    <span class="tall box bg-grey text-top"> </span>    <span class="top bg-grey">can</span>    <span class="tall box bg-grey text-bottom"> </span>    <span class="bottom bg-grey">happen.</span></span>

Note that CSS 2.1 does not define the position of the line box's baseline.? the W3C Specs

.text .middle {  display: inline-block;  vertical-align: middle;}.text figure .box {  min-width: 1em;  min-height: 1em;}.text .text-top {  display: inline-block;  vertical-align: text-top;}.text .top {  display: inline-block;  vertical-align: top;}.text .text-bottom {  display: inline-block;  vertical-align: text-bottom;}.text figure .box.tall {  height: 2em;}.text .bottom {  display: inline-block;  vertical-align: bottom;}

The baseline of the line box is invisible, but you can add a character at the beginning of the line. Like the character x in the picture above, if the character is not aligned in any way, then the character will be on the baseline by default.

Vertical-Align attribute value

The orange line represents the baseline of the line box. As you can see, inline -The position where the vertical midline (baseline) of the block element crosses the baseline of the line box plus half the vertical font height.

text-top and text-bottom

The original picture is not good, I simply made it up

The outermost blue line is the outer edge of line-height of xxx, and you can see the upper and lower edges of the font (not line-height) they target.

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">*{    margin: 0;    padding: 0;}div{    font-size: 12px;    line-height: 100px;    border:1px solid blue;}span{    line-height: 16px;    padding:5px;    display: inline-block;    border: 1px solid red;}#a{    vertical-align:text-top;}#b{    vertical-align:text-bottom;}</style></head><body><div>    <span id='a'>text-top</span>xxx<span id='b'>text-bottom</span></div></body></html>

top and bottom

This time it is targeted at the upper and lower edges of line-height.

Why Vertical-Align Behaves The Way It Behaves

Now we can look at the application of vertical-align in some specific scenarios, especially scenarios where things can go wrong .

Center the icon vertically

Add a dot auxiliary line above

Movement Of the Line Box's Baseline

This is a common trap. The baseline of the line box is affected by all elements in a row, and most vertical-align attributes (except top and bottom) are affected by this baseline.

If there is an element in a line that takes up the entire height (the upper and lower edges of the line-height of the line box), the vertical-align of the taller element will not work at this time, because there is no space to adjust it. Adapt to the baseline of the line box. At this time, the baseline of the entire line is the baseline of the short element.

If you think the content of this article is helpful to you , you can tip me: