项目中，经常会用到line-height和vertical-algin来解决垂直居中的问题，但对其原理和应用限制却很少了解。因此做了一下总结：

　　line-height具有继承性，对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致（已验证），当设置了line-height但是没有设置高度的情况下，高度由line-height决定。

　　vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同，但是它的middle值得实现却基本相同，因此用来实现垂直居中是可以的。默认是baseline居中。只对inline-block和table-cell的元素起作用。

line-height和vertical-algin的更多相关文章

  1. HTML: vertical algin Big/small div in same row (bootstrap)

    Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...

  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. height与line-height

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

  5. leetcode-[3]Max Points on a Line

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line 思 ...

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

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

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

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

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

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

  9. 浅析CSS中的BFC和IFC

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

  10. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

随机推荐

  1. shell两个数字的运算,一共三个变量

    #!/bin/bash #两个数运算的简单脚本 + ,一共三个参数 echo $# #对获取的参数以此判断是否包含[a-zA-Z]的东西,如果包含就退出.因为数字相加不是数字就是加减乘除 for i_ ...

  2. 初学 Spring boot 报错 Whitelabel Error Page 404

    按照教程,写了个最简单的 HelloWorld,尼玛报错 -->Whitelabel Error Page 404. 网上99%都是项目结构不对,说什么 Application放在父级 pack ...

  3. Mysql 常用工具

    mysqladmin:用于管理MySQL服务器的客户端 mysqladmin是一个执行管理操作的客户程序.可以用它来检查服务器的配置和当 前的状态,创建并删除数据库等等. 这样调用mysqladmin ...

  4. 隐藏的Swiper显示后无法获取正确的宽度和高度

    今天在使用swiper的时候,元素默认是显示的时候没毛病,但是默认是隐藏的状态,再显示的时候发现滑动的时候宽度计算有误,如下图所示: 正确的显示如下: 隐藏的元素再次显示如下: 宽度计算有误 解决方案 ...

  5. new/delete 的使用要点

    运算符 new 使用起来要比函数 malloc 简单得多,例如: int *p1 = (int *)malloc(sizeof(int) * length); int *p2 = new int[le ...

  6. The request lifetime scope cannot be created because the HttpContext is not available

    项目中应用了Autofac,在Global轮询处理Job的时候,需要获取现有得Service,而这些Service已经通过Autofac进行了配置,所以理所应当的用下面的代码去获取了. Depende ...

  7. Java中的内存处理机制和final、static、final static总结

    Java中的内存处理机制和final.static.final static总结   装载自:http://blog.csdn.net/wqthaha/article/details/20923579 ...

  8. (转)如何基于FFMPEG和SDL写一个少于1000行代码的视频播放器

    原文地址:http://www.dranger.com/ffmpeg/ FFMPEG是一个很好的库,可以用来创建视频应用或者生成特定的工具.FFMPEG几乎为你把所有的繁重工作都做了,比如解码.编码. ...

  9. Making the iPhone vibrate (iPhone 振动)

    from: http://stackoverflow.com/a/4725039 There are two seemingly similar functions that take a param ...

  10. Android学习笔记——Menu(二)

    知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单 上下文菜单提供对UI界面上的特定项或上下文框架的操作,就 ...