Detailed introduction to css in-depth understanding of vertical-align

First Lecture: Vertical-Align Family Basic Knowing

Understand the attribute values ​​supported by Vertical-Align and form

##:

## 1.Inherit

                                                                                                                                                                                     .        text-top,text-bottom

             4. Superscript and subscript class

                                                                                                                                                               The common values ​​are 20px 20em 20% , all support negative margin, letter-spacing word-spacing vertical-align, and the behavior is consistent. The corresponding numerical size is offset up and down based on baseline alignment

Differences in percentages

vertical-align The percentage value is calculated relative to line-height.

Lecture 2 The prerequisite for vertical-align to work

Discuss the impact of various display values ​​on vertical-align

There are conditions for vertical-align to work. Application At the inline level and table-cell elements       table-cell element

.table-Cell: & lt; td & gt;

## default: picture, button, text, and cells

## 1.display: The display level of changing elements

2.CSS Statement to the display level of the change element

The IMG label in a P tag sets Vertical-Align: MIDDLE Pictures. But it’s too short and not centered enough

Actual combat: Vertically center multi-line text and pictures

                                   Text

                                                                                     

                                                                                                                                           -align:middle }

.test-list > img{vertical-align:middle;}

Lecture 3 vertical-align and ling-height

vertical- The align percentage is calculated relative to the line-height value.

## } Equivalent to vertical-align=-3px

                                                                                                              There is a blank space at the bottom of the inline image. The solution is to remove the line height, or change the vertical-align attributes bottom, top, middle.

                     Phenomenon derived: vertical centering

                                                                                                                                                                                                                                        vertical-align: middle; line-height: 36px;

Chapter 4 In-depth understanding of the vertical-align line attribute value

The behavior of the bottom line, top line, and middle line

Vertical-align:bottom

1.inline/inline-block element: Align the bottom of the element with the bottom of the entire row

                   2.table-cell element: Align the bottom padding edge of the cell with the bottom of the table row

                                                                     TOP

11 Vertical-Middle

1.inline/Inline-BLOCK Element: The vertical center point of the element and the parent element baseline 1/2 x-height lying

## 2 2 .table-cell element: The cell padding box is centered relative to the outer table row.

                            近似垂直居中

                            完全垂直居中：设置font-size:0

第五回     深入理解vertical-align文本类属性值

         vertical -align:text-top/text-bottom

Definition

1.vertical-algin:text-top

The top of the box is aligned with the top of the parent centent-area

            2.vertical-align:text-bottom

The bottom of the

box and the bottom of the parent-level Content Area

1. The position of the element vertical-align has nothing to do with the elements before and after; The position of vertical alignment has nothing to do with line-height. As for the font size, it is related to font-size. ##                                                                                                                                                                                                                                                                                                        . The exact font size and compatibility requirements are not high

It is more suitable to use the bottom of the text and not be affected by line height and other inline elements;

The sixth chapter vertical-align superscript and subscript class

1. Hipline & lt; Sup & GT;

## 2.html in the bidding & lt; Sub & GT

## 1. & lt; Sup & GT;-& GT; Vertical-Align: Super

## 2. & LT; SUB & GT;-& GT; Vertical-Align: Sub

# definition

1.Vertical-Align: Super

to increase the baseline of the box to the appropriate upper bidding base position of the parent-level.

2.Vertical-Align: Sub

Lower the baseline of the box to the appropriate setting base line of the parent-level.

Practical application

Chapter 7: The inconsistent mechanism of vertical-align

The behavior of adjacent elements with different vertical-align

When When inconsistency occurs

Focus on the current element and parent,

There is no direct impact on the front and back

Chapter 8 Vertical-align’s poor compatibility

IE6/7

firefox/chrome

The above is the detailed content of Detailed introduction to css in-depth understanding of vertical-align. For more information, please follow other related articles on the PHP Chinese website!