span元素与块级元素（div、p）位于同一行时的垂直居中问题

       不知道大家在敲代码的时候有没有遇到这样的问题，就是一个span元素和一个块级元素（div或者p，此文以p为例，当然对于div也适用）位于同一行时，有的时候会发现span元素内的文本偏下。好了废话不多说，先来个效果图：

下面贴代码：

CSS代码：

.pDiv{
 width: 500px;
}
.pDiv > span{
 display: inline-block;
 height: 25px;
 margin-bottom: 50px;
}
.block{
 display: inline-block;
 width: 150px;
 height: 25px;
 margin: 0;
 border: 1px solid #21ab38;
 border-radius: 3px;
 background-color: #fff;
 margin-bottom: 50px;
}

html代码：

<div class="pDiv">
    <span>span元素span>
    <p class="block">p>
div>

可是当你在p元素内写上文本的时候就发现，居然对齐了！！

<div class="pDiv">
    <span>span元素span>
    <p class="block">块级元素内的文本p>
div>

效果图：

我真的什么CSS代码都没动，只是在p元素内添加了文本内容。

那么，为什么添加了文本就能对齐了呢？经过各种查资料，哀家终于找到了原因。
由于元素默认的vertical-align属性的值是baseline，即基线对齐。对于内部有文本的块级元素p的baseline是最后一行文本的baseline(不同浏览器也不太一样)，没有的就是下边缘(包括margin)，这样就导致了没有文字时的baseline对齐了p的baseline也就是对齐了p的下边缘，而p元素内有文字时就和p内的文本对齐了（注：此处不考虑p内有多行文本的情况）。

当块级元素内没有文本时，又该如何对齐呢？
一共有三种解决方案，如下：
第一种，可以给span元素添加 vertical-align: top; 属性；
第二种，给p元素添加 vertical-align: bottom; 属性；
第三种，把span和class值为block的p元素的display: inline-block;改为display: block;float: left;
注意：以上方法的前提是span和p元素有同样的高度height，你想想，要是二者的高度都不一样，又怎么可能垂直对齐呢?

好了下面是修正过后的效果图。