基线:小写字母xxxxx的下边缘线就是我们的css基线;一般的行内元素都是vertical-align: baseline;默认设置;

x-height:就是指小写字母xxxx的高度,下边缘线到上边缘线的高度。

中线:我们可以近似脑补成字母x交叉点那个位置。

我们都知道,内联元素默认是基线对齐的,而基线就是x的底部

对于vertical-align:middle

规范中对垂直对齐的middle这么解释的:

middle: This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.

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

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

vertical-align:middle通常用于img元素,,,只对inline,inline-block和表单元格起作用。

例子:

	<div style="    background: #e3e3e3;">
<img src="test.png" style="vertical-align: middle;" width="100" height="100">xxxx测试
</div>
<!-- 1 div元素高度不固定,图片的底边默认与xxxx的底边对齐baseline,div高度119px,底下留有空隙;xxxx测试在底部;
2 div元素高度不固定,对img设置vertical-align:middle,div高度115px,底边没空隙;xxxx测试在高度的正中央;
3 div元素高度不固定,对div设置font-size:0;div高度115px,底边没空隙,但是span里的文字不显示了。
4 div元素高度固定,对于设置不设置vertical-align:middle只会改变后面文字的显示位置,默认底部,设置则中部。
-->

  个人理解一行与一行的空白就是line-height减去font-size,但两者相同,上下行就没有空白了。

1

中线,基线,垂直居中vertical-align:middle的一些理解的更多相关文章

  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. 前端知识点回顾之重点篇——CSS中vertical align属性

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

  4. 关于Vertical Align的理解

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

  5. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  6. css 居中,中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

  7. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  8. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

  9. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

随机推荐

  1. Designated Initializer

    一个类,可能有很多初始化函数,但是有主次之分,最主要的初始函数应该对类内应当需要初始化的变量进行初始化.这个最主要的初始函数即Designated Initializer(指定初始化器),可以理解为是 ...

  2. hdu4734(记忆化搜索)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4734 思路:记忆化搜索. #include<iostream> #include<c ...

  3. Appium自动化测试3之获取apk包名和launcherActivity后续

    接着“Appium自动化测试3之获取apk包名和launcherActivity”章节介绍 测试脚本 1.测试脚本如下: # -*- coding:utf-8 -*- import os, time, ...

  4. iOS开发之--为PCH文件添加绝对路径

    要想设置PCH的相对路径,首先我们需要去查看绝对路径. 相对路径 点击PCH文件,Xcode的右侧会显示PCH的属性.这里我们可以获取到PCH的绝对路径.从工程的路径开始,前面使用$(SRCROOT) ...

  5. measure layout onMeasure() onLayout()

    1.onMeasure() 在这个函数中,ViewGroup会接受childView的请求的大小,然后通过childView的 measure(newWidthMeasureSpec, heightM ...

  6. SharedPreferences小技巧

    相信Android的这个最简单的存储方式大家都很熟悉了,但是有一个小小技巧,也许你没有用过,今天就跟大家分享一下,我们可以把SharedPreferences封装在一个工具类中,当我们需要写数据和读数 ...

  7. Netty 服务端创建

    参考:http://blog.csdn.net/suifeng3051/article/details/28861883?utm_source=tuicool&utm_medium=refer ...

  8. 事务以及MySQL事务隔离级别+MySQL引擎的区别

    1.事务的基本要素:ACID 1.原子性(Atomicity): 事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...

  9. sevlet实现反盗链

    有时候为了网站的版权和安全问题,我们需要为我们的网站应用设置防盗链,这样可以保证我们网站的一些资源的安全性.防盗链的主要是通过获取http的请求头referer的信息来和我们的网站地址做对比,如果相同 ...

  10. 《Django By Example》第十二章(终章) 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第十二章,全书最后一章,终于到这章 ...