在制作页面的时候，经常会遇到文本图片需要居中的情况，这时候，只要设置下文本的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. ctags的如何生成tags文件

    tags 在使用vim编程和浏览代码是非常有用.可以用CTRL+]和CTRL+t 来回跳转关键字.先生成自己工作目录的tags.最简单粗暴用法: $cd yourwork $ctags -R * 这样 ...

  2. Windows编译Opencv

    下载安装CMake 下载Opencv源码 打开CMake,设置源码路径和生成路径,点击Configure选择要生成的版本.(这里要多次Configure,直到所有红色消失!) 勾选BUILD_open ...

  3. Asp .Net core 2 学习笔记(1) —— Starup

    这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...

  4. Tomcat安装及调试

    Web服务器的作用 1.接收客户端的请求 2.给客户端作出响应 我们也可以自己手写Web服务器,但是那样太麻烦,而且难度很大,所以我们可以 使用目前应用最广泛的Tomcat服务器 常见的Web服务器 ...

  5. SQL注入之PHP-MySQL实现手工注入-字符型

    SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意的)SQL命令注入到后台数据库引擎 ...

  6. 修改oracle默认监听端口

    修改oracle默认监听端口 oracle端口修改 主要是修改两个文件和修改oracle参数local_listener 1 查看当前监听状态 [oracle@test ~]$ lsnrctl sta ...

  7. [Umbraco] 创建第一个页面

    如何创建一个页面,很简单. 进入settings,首先右键点击“Document Types”, 在出现的菜单点击"Create",在弹出的窗口中 Master Document ...

  8. IdentityServer4之Clients、Scopes、Claims与Token关联

    IdentityServer4之Clients.Scopes.Claims与Token关联 参考 官方文档:client.identity_resource.api_resource:三类配置项介绍描 ...

  9. Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

    接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码. ...

  10. Gen对于break、continue与return的处理

    void tryItOut () {} void wrapItUp () {} void tryFinally() { for (int i = 0; i < 2; i++) { try { t ...