不知道大家在敲代码的时候有没有遇到这样的问题,就是一个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
,你想想,要是二者的高度都不一样,又怎么可能垂直对齐呢?
好了下面是修正过后的效果图。