In this chapter, we will talk about vertical-align, which is also ubiquitous. Vertical-align and line-height both affect the performance of elements in the vertical direction with the horizontal flow. Therefore, understanding these two attributes is very helpful for controlling the performance of texts in the vertical direction. I’m using the word “help” here, not necessarily, and I’ve been told that the book doesn’t have to be read word for word, and it does. CSS World is in some ways a perfect fit for the “obsessive” genre, but now that I’ve read it, I want to finish the series.

1. The five attributes of vertical-align

Apart from the global attributes like inherit, vertical-align is divided into five categories by myself, and the author summarizes the first and second categories into line categories.

(1) Baseline /middle

(2) Line class based on the edge of the box: top/bottom

(3) Text classes associated with the parent baseline: text-top/text-bottom

(4) The superscript and subscript classes commonly used in formulas: super/sub

(5) Specific values: 2px/ 2EM /20%, etc

By default, inline elements are aligned along the lower edge of the letter X, so vertical-align defaults to baseline. But for a replacement elements such as images, often use the bottom edge of the element itself as a baseline, it appear very well in the past simple layout, page 20 years ago would you don’t even need to write CSS allows readers to browse web content, but now the “good” features will bring a lot of inconvenience to our CSS layout. Let’s test each of these attributes in action and use them to implement some layouts.

2. Vertical-align :baseline/middle

The default value of vertical-align is baseline, which is the lower edge of the letter X. To better see where the lower edge of x is, we need to use the most common substitution element — the image. The bottom edge of the image is usually the element itself, so let’s see what happens with the letter X and the image based on the baseline.

<div>
    <span>The letter "x"</span>
    <img src=".. / Little monk. JPG">
</div>
Copy the code

The final effect is as follows:

It can be seen that the performance result is the same as the theory. The lower edge of X is completely flat with the lower edge of the picture. Then why is the lower edge of the Chinese “letter” not aligned with the lower edge of X? No reason, the bottom edge of most Chinese and some letters is below baseline, don’t ask, ask just don’t know. At the same time, you will notice that there will be a 4px gap at the bottom edge of the image, resulting in the final container being 4px too high. Many people’s first reaction is to blame Chinese, because Chinese looks bigger and lower than the letter X, but even if you delete the SPAN label, you will still have 4 pixels more. So where did the extra 4px come from? I’m going to turn to vertical-align’s good friend Line-height to explain this.

The default value of line-height is normal. The default value is normal. The default value is normal, which is calculated from the value of font-size and font-family. So you can understand that the extra 4px is the baseline to the lower edge of the text. Therefore, the extra 4px can be solved simply by changing the vertical-align of the image, for example, to align it based on the midpoint of the letter X. Of course this is only theoretical, you can solve the problem according to the actual needs.

The modified result is as follows:

Baseline, let’s talk about middle. I can’t say a lot of people, but when I first understood vertical-align: middle, I thought that CSS found a middle line in the parent container, and then all the graphics were evenly distributed based on that middle line. In fact, the downside of this understanding is that you think vertical-align needs to be applied to the parent container, when in fact vertical-align only applies to two types of elements: inline elements and table-cell elements. In other words, the vertical-align attribute works only on elements whose display evaluates to inline, inline-block, inline-table, or table-cell. Note that operations that block elements, such as float and absolute positioning, will also invalidate vertical-align. Now that you know the scope of vertical-align, let’s take a look at how to center inline elements vertically. Again, we want the image to be centered vertically in a container of fixed height with vertical-align:middle.

<div>
    <span>The letter "x"</span>
    <img src=".. / Little monk. JPG">
</div>
<style>
div{
    height: 400px;
    background: rgba(0.0.0.0.1);
    text-align: center;
}
img{
    vertical-align: middle;
}
</style>
Copy the code

The code should look like this:

The result seems to be unsatisfactory, the image is not vertically centered, why is that? The vertical-align: middle attribute is already in effect. In a box generated by span and IMG, the image is already centered vertically based on the midpoint of the letter X. If the value of line height is equal to the height of the parent container, we can remove the height declaration and let the element keep the stream property, which automatically extends the container height.

Here the image is perfectly vertically centered, but for text, there may be some deviation, because the midpoint of the letter X is slightly different from the actual midpoint of many words. This center property can be significantly lower or higher when the text is larger. Therefore, in the actual use of the process, do not blindly believe in vertical-align text center ability.

3. Top /bottom attributes based on the alignment of the top and bottom edges of the box

Vertical – align: top; Indicates that the top of the current inline element is aligned on the vertical upper edge. Align the padding edge of the element with the top of the table row in the table-cell. We are only talking about inline elements here. Let’s explore what this means with an example. The code is as follows:

<div>
    <span style="font-size: 14px">14px</span>
    <span style="font-size: 16px">16px</span>
    <span style="font-size: 18px">18px</span>
    <span style="font-size: 20px">The letter "x"</span>
    <img src=".. / Little monk. JPG">
</div>
<style>
div{
    height: 400px;
    background: rgba(0.0.0.0.1);
}
span{
    vertical-align: bottom;
}
img{
    vertical-align: bottom;
}
</style>
Copy the code

The result is as follows. It is clear from the image below that the upper and lower edges of the inline elements are aligned to the edges of the line-box, not to be confused with the edges of the parent container.

4. Learn to discard: vertical-align text attribute class

Once you understand this property in depth, you will find that it is very difficult to soft use this property. (This sentence is written at the beginning of the sentence to make it easier for you to drill.)

Author on vertical – the align attribute classification, the baseline/middle/top/bottom is divided into a class, are based on the division of the line box box, only by its individual performance difference is subdivided into two categories. The text attribute class text-top/text-bottom has little to do with line boxes for vertical layouts.

Vertical-align :text-top Indicates that the top of the box is aligned with the top of the parent content area. Vertical-align :text-bottom Indicates that the bottom of the box is aligned with the bottom of the parent content area.

The content area refers to the background blue area when the text is selected with the mouse by default. In this case, the parent content area refers to the content area calculated according to the font size and font family of the parent.

Interested can refer to the original [example] (https://demo.cssworld.cn/5/3-9.php). I won’t go into this dead-end property here.

5. Understand the superscript and subscript attributes of vertical-align

HTML has two tags, sup subscript and sub subscript.

The default value of sup is vertical-align: super.

Sub Indicates the default vertical-align: sub

These two properties need no further explanation, just look at their specific effects.

<div>
    H<sub>2</sub>O<sup>[1]</sup>
</div>
<div>[1] : H<sub>2</sub>O is the molecular formula for water</div>
Copy the code

Since the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)

H
2O
[1]
[1] : H
2O is the molecular formula for water

6. Vertical-align Ignored utility numeric attribute

The author sneers that “many front-end developers who have been around for years may not know the value of vertical-align’s attribute, let alone the negative value,” which is a surprise, and yes, I’m the programmer who probably won’t know it for 10,000 years. Before explaining the benefits of this attribute, let’s take a look at an example of using the vertical-align “vertically centered” element.


<div style="line-height: 150px;">
    <span style="vertical-align: middle; font-size: 50px">I want to center it vertically, but it's a little bit down</span>
    <img src=".. / Little monk. JPG" style="vertical-align: middle; width: 50px; height: 50px">
</div>
Copy the code

From the result point of view, because the Chinese overall lower relative to the middle of x, the text is larger when the problem is especially apparent, however the picture in this time and it is better than words, if the text + icon (icon) format, tend to make text look always lower, icon always have some partial, Now you know the blame should fall on words. Use our vertical-align value attribute to precisely adjust the text position. If you don’t know how to set the value, let’s first see what happens with vertical-align:0, and change the vertical center of the image to base alignment for ease of observation.

<div style="line-height:150px; position: relative;">
    <span style="vertical-align: 0; font-size: 50px">My vertical-align is 0, x</span>
    <img src=".. / Little monk. JPG" style="vertical-align: baseline; width: 50px; height: 50px">
</div>
Copy the code

Vertical-align :0 = vertical-align:baseline = vertical-align:0 = baseline Therefore, vertical-align is based on the baseline alignment. In order for the image and text to be centered, we need to make sure that the image is centered first (because the image replacement property can always be completely centered), and then adjust the value of the text. The final adjustment result is as follows

<div style="line-height:150px; position: relative;">
    <span style="vertical-align: -10px; font-size: 50px">I'm going to adjust the value with x, x</span>
    <img src=".. / Little monk. JPG" style="vertical-align: middle; width: 50px; height: 50px">
</div>
Copy the code

In addition to numbers, vertical-align also supports calculations based on percentages of line-height.

7. Weird behavior of baseline in inline-block

It’s time for CSS paranormal events, which I think could even be covered in a separate chapter. The default value of the vertical-align attribute, baseline, refers to the lower edge of x for inline elements such as text, and the lower edge of the replacement element for replacement elements. These statements should be clear from this chapter, but for inline-block elements, the rules are a bit more complicated.

An inline-block element whose baseline is the bottom edge of its margin box if there are no inline elements (including anonymous inline elements) and overflow is not visible, otherwise the baseline is the baseline of the last inline element in its element.

Since inline-block elements are very important in practice, it is necessary to understand the weird inline-block CSS. The theory is too dry, so let’s give a practical example to see what is going on.

<div>
    <span style="margin-bottom: 10px"></span>
    <span>I have my own inner x</span>
</div>
<style>
div{
    background: rgba(0.0.0.0.1);
}
span{
    background: rgba(0.0.0.0.5);
    display: inline-block;
    width: 100px;
    height: 100px;
}
</style>
Copy the code

You can see that the baseline of the first inline-block element changes to the bottom edge of the margin box due to the lack of content, while the baseline of the other inline-block element is the baseline of its last line-box, in this case, the x letter of the second line, Since the layout of the inline element is based on the baseline, the “misalignment” shown in the figure occurs.

In addition to empty inline-block elements and non-empty inline-block elements, inline-block elements with different number of lines can also be misaligned. As shown below:

Although both cases can occur, it is important to note that they occur by completely different mechanisms!

Inline-block vertical-align can be used with attributes that are not based on the baseline. Since numeric attributes are also baseline-based, misalignment problems can occur, so it needs to be analyzed on a case-by-case basis, and I will only give the simplest solution. As shown below.

Never forget why you started, and your mission can be accomplished.

You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.