在制作页面的时候，经常会遇到文本图片需要居中的情况，这时候，只要设置下文本的line-height属性等于包裹该文本的元素的高度即可让文本居中显示了，先来看看这个现象。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>行高</title>

     <style type="text/css">

         .line-height-demo {

             background-color: red;

             height: 100px;

             font-size: 30px;

         }

     </style>

 </head>

 <body>

     <div class="line-height-demo">

         这是一个测试行高的文本

     </div>

 </body>

 </html>

默认情况下，文本顶在了div的左上角，现在设置下文本的line-height属性

这时候可以看到文本神奇般的居中了，这是为什么呢？要知道原因，需要弄懂line-height这个属性是什么以及它所表示的含义，line-height属性用于设置行间距，就是行与行之间的距离，一般称为行高，更官方一点的解释为文本行的基线间的距离，这里有个名词需要解释下，我想你应该猜到了，没错，就是基线。那么什么又是基线呢？看看下面这张图片

印象很深吧，就是小学学习拼音时用的四线三格，这个模板跟将要介绍的line-height原理的模板非常的类似。

根据上面的图，可以很容易的得出以下的等价关系

行高=两行文本之间的基线间的距离=文本顶线到文本的基线+文本的基线到文本的底线+一倍行距=文本的顶线+文本的底线+一倍行距（上面0.5倍+下面0.5倍）　　

既然文本的上下各有0.5倍的行距，那么我们的文字自然而然的就被夹在中间的位置了，这也说明了为什么设置文本的行高等于包裹该文本的元素高度之后，文本就居中了。

CSS学习笔记06 简单理解line-height的更多相关文章

  1. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. [Android学习笔记]Context简单理解

    一.Context是什么?上下文对象,可以理解为一个程序的运行的环境,从中可以获取当前程序的资源:getResources,getAssets 二.常见的Context有哪些?Application ...

  3. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  4. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  5. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  6. div+css学习笔记一（转）

    div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...

  7. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  8. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. centos部署yapi爬坑记

    前言 这几天终于完成了为期三个月的公司某个demo版的项目,在这期间和公司的后台因为API的事怼过无数次了,'我的接口没问题,是你请求的方式不对吧!'.'一定是你请求的参数不对'......诸如此类问 ...

  2. WinForm中实现Loading加载界面

    1,LoaderForm窗体中添加PictureBox,然后添加Loading图片 2,窗体内属性设置 StartPosition :CenterScreen在屏幕中心显示 TopMost:True置 ...

  3. Linux系统文件权限管理(6)

    Linux操作系统是多任务(Multi-tasks)多用户(Multi-users)分时操作系统,linux操作系统的用户就是让我们登录到linux的权限,每当我们使用用户名登录操作系统时,linux ...

  4. 通过Metasploit生成各种后门

    生成windows后门 1.首先生成后门 [root@localhost ~]# msfvenom -p windows/meterpreter/reverse_tcp -e x86/shikata_ ...

  5. 预处理命令使用详解----#if、#endif、#undef、#ifdef、#else、#elif

    预处理命令 在接触#if.#undef这类预处理指令前,大部分都都接触过#define.#include等预处理命令,通俗来讲预处理命令的作用就是在编译和链接之前,对源文件进行一些文本方面的操作,比如 ...

  6. Swift5 语言指南(二十三) 协议

    甲协议定义的该适合特定任务或片的功能的方法,属性和其他要求的蓝图.然后,可以通过类,结构或枚举来采用该协议,以提供这些要求的实际实现.任何满足协议要求的类型都被认为符合该协议. 除了指定符合类型必须实 ...

  7. javascript 模块化学习：Class打包出来无法实例化问题

    菜鸟初学前端,第一次尝试使用webpack, 目的是做一个lib,想用webpack + babel 自动化打包出来 es5 的js代码 模块中用到了Class,直接export{className} ...

  8. 浅谈ES6原生Promise

    浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...

  9. IQueryable与IEnumerable

    IEnumerable: 从服务器处取回所有数据,在客户端根据过滤条件进行过滤再返回结果. IQueryable: 从服务器处进行过滤,直接返回过滤后的结果.

  10. ThreadLocal是否会引发内存泄露的分析 good

    这篇文章,主要解决一下疑惑: 1. ThreadLocal.ThreadLocalMap中提到的弱引用,弱引用究竟会不会被回收? 2. 弱引用什么情况下回收? 3. JAVA的ThreadLocal和 ...