span{vertical-align:middle;}
div{vertical-align:middle;}所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
虽然vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。
四、vertical-align属性是如何起作用的？
这里，我使用vertical-align:middle属性作为例子，讲讲我对vertical-align是如何起作用的理解。
CSS参考手册上说vertical-align:middle是将当前元素放在父元素的中间，大致一读，似乎是那么回事，但是细细一想，不知道具体指什么，概念模糊。我们从简单的开始，一步一步探究生效的原理。
1. 一些简单的例子
这里先列举几个简单的例子，方便对vertical-align:middle有了初步的直观的认识。例子内容如下，创建一个inline-block属性的元素，此元素的高度和宽度均为4像素，为了对比效果明显，我使用黑白二色，背景黑色，此4像素*4像素的元素为白色，vertical-align属性依次为middle，bottom和text-bottom，当然，文字是必须的，否则何见对齐呢！整个实例的HTML代码都是一致的，唯一不同的就是一段vertical-align属性，测试环境均是Firefox3.6浏览器，HTML代码如下：
复制代码
<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;}
结果如下图：
