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. HTTP错误：java.lang.IllegalArgumentException: Illegal character in scheme at index 0: http://xxxxxx

    读取T卡文件里的域名,HTTP请求出现如下错误 java.lang.IllegalArgumentException: Illegal character in scheme at index 0: ...

  2. 巴蜀4384 -- 【模拟试题】作诗(Poetize)

    Description 神犇SJY虐完HEOI之后给傻×LYD出了一题:SHY是T国的公主,平时的一大爱好是作诗.由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次, ...

  3. windows上安装mysql

    安装mysql后 命令行闪退 查看服务 也没有MySQL服务启动 你安装了mysql没有,没有就先安装,安装好mysql以后,在bin目录下有个mysqld.exe,运行这个程序就可以添加mysql服 ...

  4. java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet

    新建Maven 项目的时候报错: java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet ...

  5. Android NFC近场通信02----读写卡的准备工作

                        Android NFC近场通信02----读写卡的准备工作      因为公司接了一个听上去感觉比較NB的项目.给某油田做派工系统 .并由小女子负责Androi ...

  6. freemarker 模板

    1 整体结构 模板(FTL 编程)是由例如以下部分混合而成的: Text 文本:文本会照着原样来输出. Interpolation 插值:这部分的输出会被计算的值来替换.插值由${和}所分隔(或者#{ ...

  7. MongoDB中对象反序列化的一个小问题

    今天在mongoDB存取对象数据的时候,碰到一个小问题:对象的某一个字段类型是抽象类或者接口.在存入的时候没有问题.可是在读取的时候,因为没有详细类的信息,无法完毕对象的又一次构建.就会报错: Can ...

  8. 【转】Selenium2学习路线

    课程大纲:第一部分:基础入门 第一课: SELENIUM2的原理介绍及环境搭建本节课主要讲解SELENIUM2的原理,让大家了解SELENIUM2的发展历程,同时解惑大家对自动化测试中产生的一些误区. ...

  9. 积跬步，聚小流------Bootstrap学习记录(3)

    响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统 我们能够从Bootstrap的官 ...

  10. 6 使用Ionic开发天气应用

    简介:本节课我们会制作一款天气应用,这款应用允许用户查看当前的天气情况.天气预报以及地点收藏,在模态框内显示日出和日落的数据,使用分页滚动面板显示天气信息,使用侧滑菜单实现导航. 6.1 项目配置 环 ...