vertical-align的一些理解与认识

一、vertical-align属性不起作用？

我们知道display也有很多属性值，其中以inline/inline-block/block三个最常见，这代表了页面上三种不同水平的元素。我常常会以液态/固液混合态/固态加以形象化思考，对应于现实中的事物就是：牛奶/果冻/坚果。vertical-align又称之为“inline-block依赖型元素”，只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。所以，类似下面的代码就不会起作用：

span{vertical-align:middle;}
div{vertical-align:middle;}

二、vertical-align属性是如何起作用的？

CSS参考手册上说 vertical-align:middle 是将当前元素放在父元素的中间

1、demo

<span class="box">
    <span class="dot"></span>
    我是一段卡哇伊的文字。
</span>

实例一：默认属性（也就是baseline）
参见如下的CSS代码：

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;}

实例二：bottom
参见如下的CSS代码：

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

2、demo2

vertical-align属性测试面板页面

来自链接