Shulou(Shulou.com)05/31 Report--

This article mainly explains how to write the vertical-align of CSS. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write the vertical-align of CSS.

When writing vertical-align style, it automatically matches a long list of attribute values, which dazzles me. Why are there so many attribute values? Which one should I use? Why is this attribute value the same as another attribute value? Count the attribute values of vertical-align. Please refer to code1-1 for the code and refer to image1-1 for expression.

Code1-1

The compilation result is as follows:

1. Vertical-align:middle; / / middle refers to the midpoint of the element at the baseline plus half of the x letter of the parent element

The height of the picture is 32px, the midpoint is 16px, and the height of the letter x is 8px, and half of the midpoint of the 4px 32px/2=-12px middle refers to the element at the baseline plus half of the x letter of the parent element, 8px/2-32px/2=-12px.

Code2-1

The compilation result is as follows:

2. Reference frame of vertical-align:50%; / / percentage values

The image size is 32px*32px [the current picture is 300px*300px, the uniform style img {width:32px;}], and the font size is the default font size of 16px for chrome. The line height is 22px when only text is displayed.

By default, since vertical-align:50%, is a percentage for an image, there must be a frame of reference. There are three assumptions about who is the frame of reference.

Suppose 1, if you take the height of the picture as the reference frame, the picture is offset upward by 32px50% = 16px.

Suppose 2, if you use font-size as the reference frame, the picture is offset upwards by 16px50% = 8px.

Suppose 3, if the row height line-height is used as the reference frame, the picture is offset upward by 22px50% = 11px.

It doesn't matter. When vertical-align is set to a percentage, its frame of reference is line-height, so I'll list two inline elements with line-height set for comparison.

Code2-2

The compilation result is as follows:

3. Vertical-align:top; is compared with vertical-align:text-top;, and the same is true of bottom and text-bottom

From the two examples where line-height:10px; is set, it is clear that top is aligned and coincident with the upper edge of the parent box model, while text-top is aligned with the upper edge of the content of the parent element.

Code2-3-1

The compilation result is as follows:

Code2-3-2

The compilation result is as follows:

4. Horizontal position

Vertical-align:top

Vertical-align:middle

Vertical-align:baseline

Vertical-align:bottom

The attribute values of horizontal position from top to bottom are: top/middle/baseline/bottom

Think of top/middle/baseline/bottom as a horizontal line and set the elements of vertical-align to align the horizontal line. You can see from the image below that the position of the horizontal line is top/middle/baseline/bottom from top to bottom.

Code2-4-1

The compilation result is as follows:

This article mainly introduces the properties of vertical-align, the following is the complete source code, it is recommended that you operate it in the browser to see the compilation results to deepen your understanding.

At this point, I believe you have a deeper understanding of "how to write vertical-align in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.