You often use line-height to center the content vertically. Do you really understand the principle?
1. What is line-height
The line-height property sets the distance between lines (line height). To put it bluntly, it is to set the distance between two paragraphs of text. If we set the line-height of a piece of text to the height of the parent container, the text can be centered vertically. Up.
2. Analyze its principle
First, let’s take a look at the picture
. Each line of text can be seen as consisting of upper spacing, text content, and lower spacing. According to the standard definition of line height, the line height is equal to the distance between the two baselines, that is, the 3 of the first line. -4+up and down spacing + 1-2+2-3 of the second line, because the top spacing and bottom spacing of each line in css must be equal, so replace it, the line height is equal to its own top spacing + bottom Spacing + text height. Therefore, we can also record the line height as, the line height is the height of a line, and the height of this line includes the upper and lower spaces and the text content itself. The text content is centered in each line, so using this principle, you can achieve vertical centering.
Look at an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈
</div>
</body>
</html>
As shown in FIG. In this example, we set the height of the div to 200px, and then there is a line of text inside, we set the line height to 200px, after setting 200px, the text itself will not change 16px, but its top and bottom spacing. As described in the figure above. When I think of this, you should understand why line-height can be centered vertically.
Three, expand
Let's look at another example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈哈哈哈哈哈哈哈哈啊哈哈
</div>
</body>
</html>
It can be found that the difference between the displacement of the code in the above example is that the text has increased a bit, let's take a look at the effect at this time.
It doesn't seem to be the vertical centering effect we want. Why is that?
The width of the div box we set is 200px. By default, when the content width exceeds the box width, it will automatically wrap. So when the text wraps, it causes this result.
Let's think about it again, even if it automatically wraps, we also want the effect in the picture below. Instead of the effect shown in the picture above.
First analyze the principle of the result of the above figure. After the line break, because we set the line-height: 200px. That is to say, it will set the line height of the paragraph to 200px, and at this time, it will be changed to 3 lines due to automatic line wrapping. So it sets the line height to 200px for each line, which is the reason for the above picture.
Then I want the effect like the picture below, what should we do? We can use display: table-cell and vertical-align: middle; to set. Look at the code directly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 100px;
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
哈哈哈哈哈哈哈哈哈哈哈啊哈哈
</div>
</body>
</html>
That's it for sharing, come on! IT people
Part of the content of this article is borrowed from the author https://blog.csdn.net/yangyuqingabc/article/details/84178815