Deep understanding of CSS learning notes: vertical-align and cssvertical-align

Deep understanding of CSS learning notes: vertical-align and cssvertical-align

1. Basic understanding of vertical-align

Supported attribute values:

① Line class: baseline (default), top, middle, bottom

② Text: text-top, text-bottom

③ Subscripts: sub, super

④ Numerical percentage type:

Similarities between values and percentages: I carries numbers, ⅱ supports negative values, and ⅲ performs the same behavior (both the upper and lower offset values based on baseline, and the percentage class is calculated based on line-height, vertical-align percentage value in IE6/IE7 does not support fractional line-height ).

2. Prerequisites for vertical-align to take effect

Apply to the inline level and the "table-cell" element.

Vertical-align elements are supported by default: images, buttons, text, and cells.

The vertical-align of table-cell only works on itself, and setting vertical-align for child elements is meaningless:

　　

3. vertical-align and line-height

Extra blank processing of stream layout:

　　

4. vertical-align bottom line, top line, and middle line behavior

Vertical-align: bottom

Definition: ① inline/inline-block element: the bottom of the element is aligned with the bottom of the entire row; ② table-cell element: cell padding edge is aligned with the bottom of the table row

　　　　

　　　　

Vertical-align: top

Definition: ① inline/inline-block element: alignment between the top of the element and the top of the entire row; ② table-cell element: alignment between the edge of the top padding of the cell and the top of the table row.

　　　　

　　　　

Vertical-align: middle

Definition: ① inline/inline-block element: the vertical center of the element and the alignment of the parent element baseline up 1/2x-height; ② table-cell element: the cell fill box is centered and aligned with the outer table rows.

　　　　

If the inline/inline-block element is set to middle, the image can only be approximately vertically centered due to the sinking of the text. If you want to completely vertically center the image, font-size must be set to 0.

　　　　

5. vertical-align: text-top/text-bottom

Definition: The top/bottom of the box is aligned with the top/Bottom of the parent content area.

　　

Note: vertical-align is only related to the parent font-size.

　　Application Environment:

　　　　

6. deep understanding of vertical-align: sub/super

The <sup> and <sub> functions are the same in html, and the font size is slightly reduced, which is 75% of the original font size.

Definition: increase/decrease the baseline of the box to the appropriate upper/subscript baseline position of the parent level.

7. Different vertical-align behavior mechanisms

Application:

　　

Note: The current element and parent level are not directly affected.

8. Poor compatibility with vertical-align

Chrome and IE7 are obviously different.

Cause: ① IE7 integration; ② there is a problem with middle's explanation

Solution:

Use inline-block to destroy the image and text integration;

 

9. Practical Application of vertical-align

(1) alignment of small icons and text

There is no compatibility difference between Negative vertical-align values.

　　

(2) vertical center of an image or multi-line text with an indefinite size: ① inline-block the main element; ② 0-width 100%-height auxiliary element; ③ vertical-align: middle