line-height是相对于font-size来计算的，vertical-align的百分比值是相对于line-height来计算的，vertical-align的默认是baseline;

demo：

font-size:14px;

line-height:1.5;

line-height的值其实就是1.2*20=21px;

如果想设置行高为25px;25/14=1.78571427,需要设置line-height为1.7858；向上取值，不能四舍五入

demo:

line-height:20px;

vertical-align:30%;

vertical-align相当于6px；vertical-align设置数值时，是相对于baseline来说的，就是相对于baseline向上移动6px

vertical-align和line-height的关系从HTML5文档声明开始的，因此，以下探讨的现象，都是在页面为HTML5声明前提下，类似下面的doctype:

<!doctype html>

<html>

对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

vertical-align只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用

所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

来自：http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

例如：

div中包裹一个img元素，会发现img的下方会有空白，那是因为：

块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，vertical-align的默认值是baseline，图片与空白节点的baseline对齐，所以就有空白节点；

baseline介绍：

在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线(baseline)。例如，line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线；其他中线顶线一类的定义也离不开基线；

字母x的下边缘(线)就是我们的基线。

CSS中有一个概念叫做"x-height", 指的是字母'x'的高度。

vertical-align: middle：middle指的是基线往上1/2 "x-height"高度。我们可以近似脑补成字母x交叉点那个位置。

vertical-align: middle并不是绝对的垂直居中对齐，我们平常看到的middle效果只是一种近似的效果。原因很简单，因为不同的字体，其在行内盒子中的位置是不一样的，比方说’微软雅黑’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle是相对容器中分线对齐，呵呵，你会发现图标和文字不在一条线上，而相对于字符x的中心位置对齐，我们肉眼看上去就好像和文字居中对齐了。

ex是CSS中的一个相对单位，指的的是小写字母x的高度，没错，就是指"x-height".

ex的价值：不受字体字号影响的内联元素的垂直居中对齐效果。

内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。设想下，假如我们图标高度就是1ex, 同时背景图片居中，岂不是图标和文字天然垂直居中，而且，完全不受字体和字号的影响。因为ex就是一个相对于字体字号的单位。

虽然使用ex做高度实现天然垂直对齐看上去很巧妙，但是，也是有局限的，就是如果图标背景的高度超过1ex，我们就只能使用vertical-align。由于IE6-IE7对内联模型的解释有问题，因此，各类vertical-align在这些浏览器下都是有问题，包括这里的ex天然基线对齐，需要特别处理下。

让vertical-align失效：

1 修改vertical-align的值为非baseline

2 内联元素块级化

3 设置元素定位position

4 设置元素浮动 float

5 设置父元素font-size=0（如果元素的line-height是相对值）,消除空白节点line-height的影响

实现img标签的垂直居中：

因为有空白节点，可以通过设置line-height来设置父元素的高度，line-height只能作用在字符上才会有高度

1 line-height 设置父元素的高度

2 设置img vertical-align为middle。这时候img近似垂直居中，因为有空白节点的影响，这时候实际上食欲空白节点的baseline对齐

3 设置父元素font-size=0；消除空白节点的影响 实现img完全的垂直居中

这种通过line-height定高，元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器，连IE7浏览器也是支持的

不过和其他浏览器再使用上还是有些需要注意的地方，就是，HTML不能这样：

<div><img src="mm1.jpg"></div>

而是需要在图片标签结束处留下空格后者换行：

<div><img src="mm1.jpg"><!-- 这里要折行或空格 -->

</div>

来自：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

vertical-align 和line-height 以及baseline的解析的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. 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

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

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

  7. 借助sass的Maps功能使得响应式代码更有条理

    原文来自这里 本文综合了原文(by Jonathan Suh)以及笔者自己的理解. Introduction 众所周知,写代码与写维护性高的代码是两回事.而涉及到响应式,代码又特别容易变的杂乱.借助s ...

  8. height与line-height

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

  9. 查找表，Two Sum，15. 3Sum，18. 4Sum，16 3Sum Closest，149 Max points on line

    Two Sum: 解法一:排序后使用双索引对撞:O(nlogn)+O(n) = O(nlogn) , 但是返回的是排序前的指针. 解法二:查找表.将所有元素放入查找表, 之后对于每一个元素a,查找 t ...

随机推荐

  1. 第k小整数（树状数组）

    洛谷传送门 入门难度.. 没错,但是我并不是要暴力做. 而是用树状数组来做. 先离散化,然后随便搞一搞就可以了.(晕.比暴力还慢) 如果要查找某一区间的的话可以把区间取出重新建树,然后再求.(更暴力) ...

  2. 内存管理——（exceptional C++ 条款9，条款10）

    C++的各个内存区域: (1)常量数据(const data)区 常量数据区存储的是字符串等在编译期间就能确定的值,在整个程序的生命周期内,这里的数据都是可用.区域内所有的数据都是 只读的. (2)栈 ...

  3. 使用 Apache Lucene 和 Solr 4 实现下一代搜索和分析

    使用 Apache Lucene 和 Solr 4 实现下一代搜索和分析 使用搜索引擎计数构建快速.高效和可扩展的数据驱动应用程序 Apache Lucene™ 和 Solr™ 是强大的开源搜索技术, ...

  4. PAT (Advanced Level) 1035. Password (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  5. C. The Two Routes---cf602C(Dij)

    http://codeforces.com/problemset/problem/602/C 题目大意:  有n个城市 有m条铁路  如果两个城市没有铁路  那么一定有公路 求从1 到 n 用铁路和公 ...

  6. HDU 3966

    树链剖分 练模板: 用的 是HH的线段树 虽然之前是我不用的摸板 修改区间 求点值: CODE: #pragma comment(linker,"/STACK:1024000000,1024 ...

  7. Mysql 数据库允许远程连接 服务器连接错误 Host 'XXX' is not allowed to connect to this MySQL server

    如果连接数据库的时候出现这个问题 Host 'XXX' is not allowed to connect to this MySQL server 说明 Mysql数据库 不允许远程连接, 需要修改 ...

  8. Spring mvc之SimpleUrlHandlerMapping

    1.配置文件如下 <bean id="method" class="com.xx.controller.xxxController" scope=&quo ...

  9. windows 平台使用wireshark命令行抓包

    Windows网络流量大,或则需要长时间抓包时,wireshark图形界面使用起来比较麻烦 wireshark 内置 dumpcap命令 Capture interface:  -i <inte ...

  10. 基于 HTML5 WebGL 的挖掘机 3D 可视化应用

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...