About Vertical-Align: What you need to know,

About Vertical-Align: What you need to know,

Reprinted Please note:TheViper http://www.cnblogs.com/TheViper

Vertical-Align: All You Need To Know)

Most of the time, I always need to vertically align a row of elements. Previously, I used float, and sometimes I used position: absolute. There is no way to set only margin or padding.

I really don't like the above methods. Float allows only one row of elements to be aligned at the top, and needs to be adjusted if vertical alignment is required. Position: absolute disconnects elements from the document stream so that they do not affect the surrounding elements. Setting margin or padding makes css not elegant.

HoweverVertical-align highlighted me and I think it deserves more attention. Technically, using vertical-align layout is a hack action, because it was not born to solve this problem. It was originally used to align text and text next to elements. Even so, vertical-align allows us to flexibly and fine-grained Alignment Elements in different contexts, because we do not need to know the size of elements, and all elements are still in the Document Stream.

Conditions for using Vertical-Align

Vertical-align is used to align the elements in the row, that is, it acts on these display attributes.Inline, inline-block, and inline-table (not discussed in this article ).

Inline-block, as its name implies, block-level elements in a row can have width, height, border, margin, and padding.

On the other hand, the elements in the row are arranged one by one, as long as there is space in the current row to accommodate the elements in the row. If there is no space, create a new row below. These In-row elements are called line boxes.

Line box contains all the content of a row. The size of the elements in a row affects the height of line box. The figure below shows how line box is defined at the top and bottom. The two red lines represent a line box.

Baseline and outer edge (Outer Edges)

Vertical Alignment the most important reference point line box involves the baseline of the element. In some cases, the top and bottom edges of the element box model are very important. Let's intuitively see the baseline and outer edges Involving Elements

The red line indicates the top and bottom edges of the line height, the green line indicates the font-size of the text, and the blue line indicates the baseline.

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

The outer edge of the element in the row is aligned with the top and bottom edge of the line-height. In the right diagram above, the outer edge of the element in the row is still a red line, although the line-height is smaller than the font height.

In addition, we can see that the baseline of the element in the row is half of the font height.

Inline-block Element

From left to right, the inline-block element contains in-flow (not separated from the Document Stream) content, inline-block element contains in-flow content, but overflow: hidden, the inline-block element contains the out-flow content (the content area has a height ).

The red line indicates the edge of margin. The yellow line is border, the Green Line is padding, the content is blue, and the Blue Line is baseline.

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

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

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

When the overflow attribute is set to a non-visible attribute, baseline is the bottom edge of the margin-box of the inline-block element, that is, its own bottom edge.

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

Line Box

 

<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>

.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;}

We can clearly see the differences between several vertical attribute values.

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

The baseline of line box is invisible, but you can add a character at the beginning of the line, just like the character x. If this character is not aligned in any way, this character is on baseline by default.

Vertical-Align Attribute Value

The orange line indicates the baseline of the line box. As you can see, the line (baseline) in the vertical direction of the inline-block element overwrites the baseline of the line box and adds the font height in the half vertical direction.

Text-top and text-bottom

The original graph is not good, so I just made a simple

<! DOCTYPE html>

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

Top and bottom

This time, the line-height is applied to the upper and lower edges.

Why Vertical-Align Behaves The Way It Behaves

Now we can look at the application of vertical-align in some specific scenarios, especially scenarios that may cause errors.

Vertical center of icons

Add a point guides to the above

 

Movement Of the Line Box's Baseline

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

If there is an element in a row that is full of the entire height (line-height of the line box), vertical-align of the high element does not work at this time, because there is no space to adjust it to adapt to the baseline of the line box, 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 reward me: