<html>

<head>
<style>
</style>
</head>

<body>
<!--line-height:属性表示的是该div中的文字的行高，注意这个属性是来定义文字的行高的，单行文本垂直居中时可以设置line-height和height一即可-->
<!--line-height=文本上边距+文本+文本下边距，文本上下边距始终相等，也就是说文本始终是垂直居中于line-height中的，所以设置line-height和height相等就能达到文本垂直居中于它的父元素的效果。-->
<div style="line-height:80px;height:80px;border:1px solid red">
<div style="display:inline;border:1px solid green;">单行文本div中居中显示</div>
</div>

<div style="height:300px;line-height:300px;border:1px solid red;">
<!--多行文本的垂直居中，可以将多行文本看做是一个inline或inline-block元素-->
<div style="line-height:normal;display:inline-block;border:1px solid red;vertical-align:middle">
多行文本居中显示<br>
多行文本居中显示<br>
多行文本居中显示<br>
多行文本居中显示<br>
</div>
<!--这里要使多行文本居中，设置这个空字符很关键，要不就不能垂直居中的-->
<i>&nbsp;</i>
</div>

</body>
</html>

对line-height的理解的更多相关文章

  1. Backtracking line search的理解

    使用梯度下降方法求解凸优化问题的时候,会遇到一个问题,选择什么样的梯度下降步长才合适. 假设优化函数为,若每次梯度下降的步长都固定,则可能出现左图所示的情况,无法收敛.若每次步长都很小,则下降速度非常 ...

  2. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  3. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  4. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  5. CSS——对height和line-height的理解

    最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...

  6. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  7. CSS魔法堂：深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  8. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  9. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  10. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

随机推荐

  1. JavaWeb——Servlet开发2

    1.HttpServletRequest的使用 获取Request的参数的方法. 方法getParameter将返回参数的单个值 方法getParameterValues将返回参数的值的数组 方法ge ...

  2. mui的app页面使用layui填充数据

    在mui的开发中有个坑,mui.plusReady在web上使用时是不会起作用的,只能在app上才行,所以推荐自己测试时使用mui.ready去写加载时的方法. 前端请求的返回格式为json,所以在后 ...

  3. 解决微信二次分享失败--后面被加上from=singlemessage&isappinstalled=0的解决方案

    首次分享成功,点开后再次分享或第三次分享就失败了 1.检查你分享的链接,看是否多了两个参数,微信分享会根据分享的不同,为原始链接拼接: 朋友圈   from=timeline&isappins ...

  4. 996工作制？不如花点时间学知识！北栀暗影教你如何用WordPress搭建专业网站

    很多70后.80后小时候都看过这样一部动画片-<半夜鸡叫>.讲的是地主"周扒皮"为了长工们能多干些活,半夜三更起来学鸡叫让长工劳动(卖身契上规定:鸡叫就得起床干活劳动) ...

  5. ZooKeeper实现同步屏障(Barrier)

    按照维基百科的解释:同步屏障(Barrier)是并行计算中的一种同步方法.对于一群进程或线程,程序中的一个同步屏障意味着任何线程/进程执行到此后必须等待,直到所有线程/进程都到达此点才可继续执行下文. ...

  6. 7.17 正则表达式 re模块

    在介绍正则表达式和re模块之前,先简要介绍一下 正则表达式与re模块的关系 1.正则表达式是一门独立的技术,任何语言均可使用 2.python中要想使用正则表达式需要通过re模块 正则表达式 元字符 ...

  7. python历史背诵

    一.python简介 python2:源代码不统一 有重复功能的代码 默认编码是ascii 没有中文 输出中文需要用头文件 #-*-coding=utf-8-*- 进行转换 py3:源代码统一 没有重 ...

  8. Mongodb最基础入门教程

      Mongodb最基础入门教程 如果想了解一下redis的入门教程,可以去看一下我的上一篇博客 Mongodb的安装大家可以参考一下其他博主的博客,这里我就不做介绍了.不过值得注意的是,在Linux ...

  9. springboot整合html时的页面的跳转404

    在用springboot对html的页面进行渲染时,页面找不到报404(type=Not Found, status=404)., 解决办法:是在ctroller层加相应的           @Re ...

  10. Leetcode 5. Longest Palindromic Substring(最长回文子串， Manacher算法)

    Leetcode 5. Longest Palindromic Substring(最长回文子串, Manacher算法) Given a string s, find the longest pal ...