非零基础自学前端最后一遍一 HTML+CSS 7 CSS属性-字体 7.5 文本居中显示line-height

谁借莪１个温暖的怀抱￠ 2024-03-25 10:22 47阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  7 CSS属性-字体
         *   *  7.5 文本居中显示line-height
             *   *  7.5.1 line-height(常用)
                 *  7.5.2 为什么文本需要行高?
                 *  7.5.3 line-height

![在这里插入图片描述][98aff23a59f5428ab212560102e8514e.png_pic_center]

#### 一 HTML+CSS ####

#### 7 CSS属性-字体 ####

##### 7.5 文本居中显示line-height #####

###### 7.5.1 line-height(常用) ######

line-height用于设置文本的行高

*  行高可以先简单理解为一行文字所占据的高度

![在这里插入图片描述][7161d083dfe1483eb3f32a5335f47b06.png_pic_center]

不加行高是这样的

![在这里插入图片描述][f46494d647ad4918a168a8580b1906c3.png_pic_center]

每一行文本都是有一个高度的

###### 7.5.2 为什么文本需要行高? ######

![在这里插入图片描述][aea2e255377f45219913b7bbd73d5c33.png_pic_center]

加上行高

![在这里插入图片描述][7fad584fb7964fad9c883da6f1d1456e.png_pic_center]

显得更加立体

###### 7.5.3 line-height ######

行高的严格定义是：两行文字基线（baseline）之间的间距

*  基线（baseline）：与小写字母x最底部对齐的线

![在这里插入图片描述][f25a5c4a2f1a4ad98d04025c5054e5dd.png_pic_center]

*  注意区分height和line-height的区别
    
     *  height：元素的整体高度
     *  line-height：元素中每一行文字所占据的高度
 *  应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
    
     *  让line-height等同于height

![在这里插入图片描述][38269f60d78b444b91a6c247ba80b31b.png_pic_center]

[98aff23a59f5428ab212560102e8514e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0340d488265e4c50a84f2e747a3a06ed.png
[7161d083dfe1483eb3f32a5335f47b06.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/aae19b73917e43bdbe1a221bd9838216.png
[f46494d647ad4918a168a8580b1906c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ba0f502dac5b4f94bc0c26cb9c28c2fa.png
[aea2e255377f45219913b7bbd73d5c33.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c753b9b30d49487a88d4f20dd44fb347.png
[7fad584fb7964fad9c883da6f1d1456e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/11b1f2eeb1f44cc1af290ce4e0804d51.png
[f25a5c4a2f1a4ad98d04025c5054e5dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3988c046b9d34d6082f99ab8dd3d8d96.png
[38269f60d78b444b91a6c247ba80b31b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/34b3f3fb9c5541f7b4817adca44d9e2b.png