Home >Web Front-end >HTML Tutorial >How to use line-height when creating a page?
How to use line-height when creating a page?
- PHP中文网Original
- 2017-06-21 09:59:024044browse
When making a page, we often encounter situations where text and images need to be centered. At this time, just set the line-height attribute of the text equal to the height of the element that wraps the text to center the text. First, let’s do this. Look at this phenomenon.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行高</title> 6 <style type="text/css"> 7 .line-height-demo { 8 background-color: red; 9 height: 100px;10 font-size: 30px;11 }12 </style>13 </head>14 <body>15 <div class="line-height-demo">16 这是一个测试行高的文本17 </div>18 </body>19 </html>
By default, the text is placed in the upper left corner of the div. Now set the line-height attribute of the text
At this time, you can see that the text is magically centered. Why is this? To know the reason, you need to understand what the line-height attribute is and what it means. The line-height attribute is used to set the line spacing, which is the distance between lines. It is generally called line height, which is more official. It is explained as the distance between the baselines of text lines. There is a term here that needs to be explained. I think you should have guessed it. Yes, it is the baseline. So what is the baseline? Take a look at the picture below
# It’s very impressive. It’s the four lines and three grids used in elementary school to learn pinyin. This template is similar to the template of the line-height principle that will be introduced. Very similar.
According to the above figure, you can easily draw the following equivalent relationship
Line height = the distance between the baselines between two lines of text =Top line of text to baseline of text+Baseline of text to bottom line of text+One line spacing=Top line of text+Bottom line of text+One line spacing (0.5 times above + 0.5 times below)
Since the text There is 0.5 times the line spacing above and below, so our text will naturally be sandwiched in the middle. This also explains why after setting the line height of the text equal to the height of the element that wraps the text, the text will be centered.
The above is the detailed content of How to use line-height when creating a page?. For more information, please follow other related articles on the PHP Chinese website!