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)，这样就导致了没有文字时<span>的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，你想想，要是二者的高度都不一样，又怎么可能垂直对齐呢?

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