默认情况下（行内基线位置 = 行内元素最大高度）：

如果对这个正方形使用 vertival-align：middle。在最大高度的元素上使用负值（middle = - 50% * 元素高度），可以提升基线位置，如下：

http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

w3c是这么写的：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

测试发现最好的理解是这样的：

初始情况下，基线的位置 = 行内元素的最大高度

vertical-align值为0px或者0%（line-height）时，该行内元素底部就是和基线对齐的。

基线降低多少取决于当前行内所有元素中vertical-align的最大值，其余元素的位置则取决于自己的vertical-align而相对于基线而变化（+：元素上移，-：下移）

应用文字或图片垂直居中

以上行内元素align的最大值是一半浏览器高度，所以基线下降一半的浏览器高度，这就导致元素垂直居中了

【以上案例中容器不使用绝对定位或000者固定定位，100%的高度就无效…但是容器里面的元素不使用定位，100%的高度是有效的。个人理解就是：body的直接元素必须设置定位100%高度才会生效】

以上代码中文字替换成图片时，只能是大概居中（文字是居中了，但是图片的位置偏高）：

解决办法：在图片上加个属性即可:vertival-align:middle；效果如下：

阶梯案例

<body>

    <style>

        .item{

            display: inline-block;

            line-height: 30px;

        }

    </style>

    <span class="item" style="vertical-align: 100%">1</span>

    <span class="item" style="vertical-align: 80%">2</span>

    <span class="item" style="vertical-align: 60%">3</span>

    <span class="item" style="vertical-align: 40%">4</span>

    <span class="item" style="vertical-align: 20%">5</span>

    <span class="item" style="vertical-align: 0%">6</span>

</body>

效果：

复习以上红字的结论，解释如下：

　　基线初始位置等同于行内元素的最大高度，也就是30px；

　　vertical-align为正值，则元素抬升，相对来说就是基线下降；

　　这个行内有6个元素，最大值为100%，也就是line-height * 100%=30px。则基线下降30px；原来的位置就在30px，现在又下降30px，则现在行基线的位置在60px处；

　　其他元素相对于基线调整自己的位置。0%就刚好在基线上（也就是6，元素底部与基线对齐）；

关于 vertical-align的更多相关文章

  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. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. highcharts

    preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...

  7. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  8. 进一步封装highchart，打造自己的图表插件：jHighChart.js

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...

  9. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  10. HighCharts从数据库中读取数据

    1.index.js router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); ...

随机推荐

  1. 状压dp小结 By cellur925

    会一直慢慢写的... 一.一些技巧(位运算) 取出整数n在二进制表示下的第k位,检验是否为1---(n>>k)&1 求最后完备状态(假设都是1),有n个待枚举状态,结果是(1< ...

  2. 洛谷p1115 最大子段和

    题目链接: 最大子段和 题目分析: 动态规划O(n)求解,设f[i]表示以i为终点的最大子段和 分两种情况: 若f[i-1]>0,则显然f[i]=f[i-1]+a[i](a[i]必须包含在内) ...

  3. DFS HDOJ 5348 Ponds

    题目传送门 题意:有一张无向图,度数小于2的点会被去掉,直到全都大于等于2,问连通块顶点数为奇数的权值和为多少 分析:首先DFS把度数小于2的vis掉,第二次DFS把属于同一个连通块的vis掉,检查是 ...

  4. 模拟 HDOJ 5095 Linearization of the kernel functions in SVM

    题目传送门 /* 题意:表达式转换 模拟:题目不难,也好理解题意,就是有坑!具体的看测试样例... */ #include <cstdio> #include <algorithm& ...

  5. 香港药品 ref

    --公牛牌风湿骨刺丹30粒 参考网站--http://item.jd.com/1955815605.html?gjz=0#comments-list 88 --参考网站1,没有 http://www. ...

  6. HAL之定时器

    一首先得对定时器的时钟与系统时钟的关系搞清楚,基本定时器的时钟来自APB1最大36MHZ.(定时器倍频值为1) 二 在STM32CubeMX中打开外设功能,时钟源选择内部:然后在配置定时器3中的参数设 ...

  7. CZ-python01-06

    练习代码 练习代码 # Python注释 # 注释不是越多越好,对于一目了然的代码,不需要添加注释 # 对于复杂的操作,应该在操作开始填上若干行注释 # 对于不是一目了然的代码,应在其行尾添加注释(为 ...

  8. ubuntu 16.0.4安装MySQL5.7

    系统版本 root@sishen:~# uname -a Linux sishen 4.10.0-35-generic #39~16.04.1-Ubuntu SMP Wed Sep 13 09:02: ...

  9. Spring-bean(零)

    内容提要:红为1,黄2,绿3 -----配置形式:基于xml文件的方式:基于注解的方式 -----Bean的配置方式:通过全类名(反射),通过工厂方法(静态工厂方法&实例工厂方法),Facto ...

  10. CF749D Leaving Auction

    题目链接: http://codeforces.com/problemset/problem/749/D 题目大意: 一场拍卖会,共n个买家.这些买家共出价n次,有的买家可能一次都没有出价.每次出价用 ...