Css: a deep understanding of vertical-align and cssvertical-align

Css: a deep understanding of vertical-align and cssvertical-align
Lecture 1: basic understanding of the vertical-align family

Understand vertical-align's supported attribute values and composition

Attribute:

1. inherit

2. Line

Baseline, top, middle, bottom

3. Text

Text-top, text-bottom

4. superscript class

Sub, super

5. Numerical percentage

20px, 2em, 20%

Common values include 20px, 20em, 20%, and negative values such as margin and letter-spacing word-spacing vertical-align are supported. The behavior is consistent with the value corresponding to the vertical and vertical offsets based on the baseline alignment.

Percentage difference

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

Ii. Prerequisites for vertical-align

Discuss the influence of various display values on vertical-align

Vertical-align is conditional and applies to the inline level and table-cell elements.

Inline horizontal element

Img span strong em

Inline-block input

Table-cell Element

. Table-cell: <td>

By default, images, buttons, text, and cells are displayed.

1. display: Change the display level of the element.

2.css declares changing the display level of an element

 

The img label in a P tag sets vertical-align: the middle image is not centered.

Vertical-align does not work, but is too short to center.

Practice: vertical center of multi-line text and images

<Div class = "test-list">

<Span> text </span>

</Div>

. Test-list {text-align: justify}

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

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

 

Third, vertical-align and ling-height

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

{

Line-height: 30px;

Vertical-align:-10%;

} Equivalent to vertical-align =-3px

The bottom of the inline image is blank. The solution can be to remove the line height, or change the vertical-align attribute bottom, top, and middle.

 

Basic phenomenon derivation: vertical center

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

If you set a tag to apply a row that is higher than the image size, the image is approximately vertically centered.

 

Fourth, a deep understanding of vertical-align line class attribute values

Bottom line, top line, and middle line behavior

Vertical-align: bottom

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

2. table-cell element: the bottom edge of the cell padding and the bottom of the table row are aligned

Vertical-align: top

Vertical-middle

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

2. table-cell element: the cell Filling Box is centered and aligned with the outer table row.

Approximately vertical center

Completely vertical center: Set font-size: 0

Fifth, in-depth understanding of vertical-align text class attribute values

Vertical-align: text-top/text-bottom

 

Definition

1. vertical-algin: text-top

Align the top of the box with the top of the 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 vertical-align vertical align of the element has no relationship with the front and back elements;

2. The vertical align position of the element vertical-align has no relationship with the line height line-height. The font size is related to the font-size.

 

Actual Effect

Alignment between emoticon and text (16x16)

 

The problem with baseline usage is that the icon is on the top.

The problem with using the top line/bottom line is that it is affected by other inline elements, resulting in a huge positioning deviation.

It is also a good choice to use the midline. The font size and compatibility requirements for a single request are not high.

The bottom of text is suitable not to be affected by line height and other inline elements;

 

Sixth back to vertical-align subscripts

<Sup>

Subscript in 2.html <sub>

The size of the original font is reduced by 75%.

 

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

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

 

Definition

1. vertical-align: super

Increase the baseline of the box to the appropriate parent baseline position.

2. vertical-align: sub

Reduce the baseline of the box to the appropriate subscript baseline position of the parent level.

Practical Application

7. Mechanism of different vertical-align actions

Behavior of vertical-align with different Adjacent Elements

 

When there is inconsistency

Focus on the current element and parent level,

No direct impact

Eighth back to vertical-align poor compatibility

IE6/7

Firefox/chrome