实例六：middle
参见如下的CSS代码：
复制代码
.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:middle;}
结果如下图所示：
2. 复杂点的例子
如果说上面的例子只是热身的话，那么现在就要开始进入实战了。在这里的实例中，我们添加一个新的元素，就是图片，我们通过观察不同属性下图片的样式表现来理解vertical-align:middle等相关属性是怎么一回事，是怎样产生页面表现的。
为了方便大家理解，同时也是为了自己加深对vertical-align的理解，我特地做了个简易的vertical-align属性实验面板，见下图：
通过修改，行高以及对应元素的vertical-align属性，您会在页面上直接看到效果，同时修改文字大小的页面表现也有助于您对inline box模型的理解。由于IE6/7对inline box的解释不完善，同时对vertical-align的认识也是一坨香喷喷的鸟屎，所以请不要再IE6/7下使用此面板，会对您产生误导的，IE8，Firefox，最新的Opera浏览器，chrome。Safari浏览器都是上佳的选择。关于IE6/7的解释问题会在下集介绍。
这里说点我的认识吧：vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象！这就是我的认识，当然，我也可以为我的理解提供强有力的证据，我们来看vertical-align属性实验面板。
当我们将图片vertical-align:middle属性改为其他的时候，例如top，或是bottom的时候，您会发现，图片位置上移或是下移了，且居边了，但是文字在那里却纹丝不动，显然，vertical-align的本质上是个独立的个体，与后面的line水平的元素是不存在直接的关系的。两者没有必然的联系，这是一个需要认识清楚的重要的东西。
您也可以查看下面一段录制的视频，在Firefox3.6浏览器下录制，观察表现效果：
