A detailed introduction to CSS in-depth understanding of vertical-align

First: Basic understanding of the Vertical-align family

Understand the attribute values supported by vertical-align and the composition

Property:

1.inherit

2. Line Class

Baseline,top,middle,bottom

3. Text class

Text-top,text-bottom

4. Superscript Subscript class

Sub,super

5 Value Percent class

20px,2em,20%

All features with a value of 20px 20em 20%, both support negative margin,letter-spacing word-spacing vertical-align, consistent behavior in baseline alignment based on the upper and lower offset corresponding numerical size

Differences in percent classes

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

Second, the premise that vertical-align works

Discussion on the influence of various display values on Vertical-align

Vertical-align function is conditional, applied to the inline level as well as the Table-cell element

Inline horizontal elements

IMG Span strong EM

Inline-block input

Table-cell elements

.table-cell:<td>

Default state: Picture, button, text, and cell

1.display: Change the display level of an element

2.CSS declaration changes the display level of an element

The IMG tag in a P tag sets the vertical-align:middle image to not center

Not vertical-align not working, but too short, not centered

Combat: Multi-line text and picture Vertical Center

<p class= "Test-list" >

<span> text </span>

</p>

. test-list {Text-align:justify}

. test-list > span{display:inline-block; width:210px; Vertical-align:middle}

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

The third lecture vertical-align and Ling-height

Vertical-align percent is calculated relative to the Line-height value

{

line-height:30px;

vertical-align:-10%;

} equivalent to vertical-align=-3px

Inline image below the blank, the solution to remove the row height, or change the Vertical-align property Bottom,top,middle can

Basic phenomenon derivation: vertical centering

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

The set label app is taller than the picture, and the picture is centered vertically.

The four-back Vertical-align line Class attribute values in-depth understanding

Baseline, top line, midline behavior

Vertical-align:bottom

1.inline/inline-block element: The bottom of the element is aligned at the bottom of the entire line

2.table-cell elements: Cell bottom padding edge and table row bottom align

Vertical-align:top

Vertical-middle

1.inline/inline-block element: The vertical center point of the element and the parent element are aligned at the x-height of the baseline

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

Approximately vertically centered

Completely vertically centered: set font-size:0

Deep understanding of Vertical-align text Class property values

Vertical-align:text-top/text-bottom

Defined

1.vertical-algin:text-top

Align top of box with parent Centent-area

2.vertical-align:text-bottom

The bottom of the box is aligned with the bottom of the parent content area

1. The position of the element vertical-align vertical alignment is not related to the elements of the front and back;

2. The position of the element vertical-align vertical alignment is not related to the row height Line-height, as for the font size associated with font-size

Practical role

Image of the image with the alignment of the text (16x16)

The problem with using baselines is that the icon is biased

The problem with the top/bottom line is that it is affected by other inline elements, causing great positioning deviations

The use of midline is also a good choice, single need to exact font size and compatibility requirements are not high

Using the bottom of the text is more appropriate to be unaffected by row heights and other inline elements;

Sixth back vertical-align subscript class

Superscript <sup> in 1.html

Subscript <sub> in 2.html

Smaller is the size of the original font 75%

1.<sup>-->vertical-align:super

2.<sub>-->vertical-align:sub

Defined

1.vertical-align:super

Raise the baseline of the box to the appropriate superscript baseline position at the parent level.

2.vertical-align:sub

Lower the box's baseline to the appropriate subscript baseline position for the parent.

Practical application

Seventh: The mechanism of vertical-align before and after the action

Behavior of different vertical-align of neighboring elements

When there is a inconsistency

Focus on the current element and parent,

does not directly affect

Eighth back vertical-align bad compatibility

Ie6/7

Firefox/chrome