项目中,经常会用到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. 分布式系统技术系列--租约(lease) (转载)

    租约(lease)在英文中的含义是“租期”.“承诺”,在分布式中一般描述如下: Lease 是由授权者授予的在一段时间内的承诺. 授权者一旦发出 lease,则无论接受方是否收到,也无论后续接收方处于 ...

  2. [转]Private Libraries、Referenced Libraries、Dependency Libraries的区别

    一.v4.v7.v13的作用和用法 1.Android Support V4, V7, V13是什么? 本质上就是三个java library. 2.为什么要有support库?   是为了解决软件的 ...

  3. cocos2dx3.2利用ProgressTimer组合成评分控件

    一.制作背景 如今非常多游戏或者应用须要评分,就是一般来说满分10分,一般用星星来表示. 那么cocos2dx里面怎样制作评分这种控件呢? 我的打算是进度条组合成即可了. 二.材料准备 如上图所看到的 ...

  4. server后台程序的内存使用问题

    眼下我开发的一个server后台程序存在这么一个问题,因为我的程序要不断的收发消息,并做统计.统计用的是stl的多重map.在统计中会不断的往map里赛数据. 可是每次统计后我都会调用clear()去 ...

  5. elasticsearch安装与使用(4)-- 安装中文分词插件elasticsearch 的 jdbc

    前言 elasticsearch(下面简称ES)使用jdbc连接mysql比go-mysql-elasticsearch的elasticsearch-river-jdbc能够很好的支持增量数据更新的问 ...

  6. json拼接转义符

    //转义符替 function escapeReplace(Str) { var newStrJson = Str.replace(/\%/g, "%25"); newStrJso ...

  7. 【转】java基本数据类型vs封装数据类型

    1.基本概念 说java是面向对象的语言是正确的,但是她不纯,基本数据类型就不是对象. 基本数据类型可以大致分为三类:数据型:int.short.long.byte.float.double字符型:c ...

  8. pacbio 原始下机数据h5 文件简介

    pacbio 采用hdf5文件格式保存原始的下机数据,对于RS 测序系统而言,会产生一个 bas.h5 的文件; 以bas.h5 文件为例,看一下有下机数据中保存了那些信息 h5dump 工具可以用来 ...

  9. jquery widgets 弹框

    <div id='dialog' style="display:none;"> <div style="text-align:center;" ...

  10. highchart的用法积累

    highcharts 柱子换颜色 var colors = Highcharts.getOptions().colors; $(arr_Y_bfb).each(function (index, ele ...