Vertical-align, which is an all-luck attribute when used, is also difficult for beginning front-end programmers to understand. Next, we will remove the mysterious veil of vertical-align layer by layer and gradually grasp vertical-align deeply.
I. Peripheral concept
First, you can understand a few concepts:
1. Baseline:
The base line of the lower edge of a line is the base line of the lower edge of the lowercase letter X. Note: Text content refers to the text rendered by an inline-block element. It also includes inline elements that have content effects, such as IMG, input, and SELECT.
1) When there is text in an inline-block element, the baseline of the inline-block element is the baseline of the last line of text (element), regardless of the location of the text in the child object container.
2) When there is no text in an inline-block element, the baseline of the inline-block element is the margin-bottom edge of the container. It has no relation to the elements in the container, even if there is a margin merge with the inner element.
2, x – height
Distance between baseline and mainline mean line.
3, font size: font size setting value.
4. Inline box model
For a deeper understanding, refer to the CSS box model
5, line-height: set the distance between the lines (line height)
When set in percentage or multiple, set relative value according to font size.
p{ font-size: 100px; line-height: 150%; // mso-font-kerning: 0pt; mso-font-kerning: 0pt; The line - height: 1.5; // line-height = 100px * 1.5 = 150px}Copy the code6, line box
The difference between the calculated value of line-height and font size (called “line spacing” in CSS) is divided in half and added to the top and bottom of a line of text, respectively. The smallest box that can contain these things is a line box.
Second, the vertical – align
Anyway, vertical-align only works for the following elements: inline, inline-block, inline-table, which specify the vertical alignment of elements. For block-level elements, vertical-align does not work. 1, vertical-align: baseline (default), so that the element’s baseline is aligned with the parent element’s baseline. Example 1: Empty content inline block elements
<span style="border:1px solid blue;">This is the previous text<div style="display:inline-block; width:100px; height:100px; border:1px solid red;">
</div>This is the back</span>
Copy the codeRunning results:
Example 2: img: an element such as an image or input field that does not have a baseline, aligns its bottom with its parent element’s baseline (the line frame’s baseline).
<div>
<img src="./touxiang.png">This is the previous text</div>
Copy the codeRunning results:
Example 3: An inline-block with content
<body>
<div style="display:inline-block; width:100px; height:100px; border:1px solid red;">This is the content of the first element</div>
<div style="display:inline-block; width:150px; height:150px; border:1px solid red;">This is the middle element XXX</div>
<div style="display:inline-block; width:200px; height:200px; border:1px solid red;">This is the content of the last element<img src="./touxiang.png">
</div>Text XXX</body>
Copy the codeRunning results:
So when you have more than one row of elements and blocks in the row, you can see that the arrangement is uneven because of the different baseline positions of each element. So how do we center each element vertically, and then let’s look at another value of vertical-align: middle. 2, vertical-align: middle, that is, align the vertical center of the inline element (set vertical-align: middle element) with the 1/2 x-height (right in the middle of the letter X) above the baseline of the box. For example 3 above, add vertical-align: middle to each div and it will run like this:
1. Picture + single line of text
<div style="border:1px solid blue">
<img src="./touxiang.png" style="vertical-align: middle;">
<span>XXXX is a single line of text</span>
</div>
Copy the codeRunning results:
2. The image +inline-block scenario is suitable for multiple lines and custom content on the right.
<style>
.user {
width: 320px;
padding: 10px;
font-size: 0;/* Used to eliminate the ghost blank node */ where an inline element exists
border: 1px solid red;
}
.user-img {
vertical-align: middle;
width: 30%;
}
.user-info {
border: 1px solid blue;
display: inline-block;
width: calc(70% - 2px);/*margin and border do not count in width*/
vertical-align: middle;
font-size: 14px;
}
</style>
<div class="user">
<img src="./touxiang.png" class="user-img">
<div class="user-info">
<p>The name</p>
<p>position</p>
<p>Personal introduction: I am an Aquarius girl.</p>
<p>Personal introduction: I am an Aquarius girl.</p>
<p>Personal introduction: I am an Aquarius girl.</p>
</div>
</div>
Copy the codeRunning results:
3. Center single line Text Because text defaults to be centered vertically in the row, set the line height to the height of the parent element so that the single line text is centered vertically in the parent element.
<div style="border:1px solid red;">
<span style="line-height: 50px;">I'm just a line of text</span>
</div>
Copy the codeOperation effect:
In addition to the baseline and middle, vertical-align has other attributes (text-top,sub,bottom, etc.) and usage situations (control the vertical alignment of table cell contents).
1. Everything you need to know about vertical-align: juejin.cn/post/684490… Recommend relevant piece 1. You don’t know the vertical – align: www.jianshu.com/p/71a03b8f6…