项目中,经常会用到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. oozie中使用sqoop导入hive表时提示hive找不到

    根据出错信息是找不到hive的位置,所以想到的解决方法是: 在sqoop的workflow中添加job-xml,属性写hive-site.xml在hdfs上的位置. (fail) 直接配置一个hive ...

  2. windows系统IIS服务安装

    打开控制面板,win8可以使用快捷键win键+X打开列表   打开程序和功能   打开左上角启用或关闭windows功能   打开internet信息服务下拉单   按照下列图中进行对应项勾选 第一个 ...

  3. ansible register when: result | succeeded when: item.rc != 0

    ansible register 这个功能非常有用.当我们需要判断对执行了某个操作或者某个命令后,如何做相应的响应处理(执行其他 ansible 语句),则一般会用到register . 举个例子: ...

  4. (五)Qt实现自定义模型基于QAbstractItemModel

    一个小例子 QTableView + QStandardItemModel QStandardItemModel model; //设置大小 model.setColumnCount(); //列 m ...

  5. 关于Unity中的Input输入事件

    截获鼠标,键盘的消息 监听事件我们都是在Update里面监听的. Unity的虚拟轴打开:Edit-->Project Settings-->Input,打开的各个Name就是双引号里面要 ...

  6. selenium测试(Java)--操作cookie(十七)

    package com.test.cookies; import org.openqa.selenium.Cookie; import org.openqa.selenium.JavascriptEx ...

  7. 【转】PNG图像文件格式

    5.2  PNG图像文件格式 PNG是可携式网络图像(portable network graphics)的英文缩写.PNG是从网络上开始发展的,目的是替代GIF和JPG格式,PNG图像文件格式也是当 ...

  8. ARP协议相关介绍

    什么是ARP协议? ARP,即地址解析协议,实现通过IP地址得知其物理地址.在TCP/IP网络环境下,每个主机都分配了一个32位的IP地址,这种互联网地址是在网际范围标识主机的一种逻辑地址.为了让报文 ...

  9. PNG透明兼容IE6的几种方法(转)

    png 透明针对 IE6 一直是件挺麻烦的事情,使用的方法也是各有不同,大多的原理是用 IE 的滤镜来解决的. 语法: filter:progid:DXImageTransform.Microsoft ...

  10. 【Java面试题】13 Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements(实现)interface(接口)?

    1.什么是匿名内部类? 内部类,存在于另一个类内部的类,而匿名内部类,顾名思义,就是没有名字的内部类. 2.为什么需要匿名内部类? 每个inner class都能够各自继承某一实现类(implemen ...