当我们在一个li元素，或者div元素中填写文本信息的时候，通常会将其居中，使得页面看上去更加的美观。横向居中不用说，方法很多，使用margin,padding,test-align等等方式都可以完成。而纵向居中除了margin,padding等手段之外，最好用的，莫过于line-height.

在我们的盒模型中，有一类叫做行盒。它的默认高度与我们的元素盒一致，当我们需要改变文本的纵向排列时，改变它的大小即可顺利完成。在对文字进行居中排列时，只需要将行高设置为父元素的高度，十分简单，就不多说了。我这里要说的是图片与文字的对齐。

在使用CSS进行图片与文字的对齐操作中，我们一般会使用“vertiacl-align:middle”代码来完成。这种方式是基于行盒的对齐参考线来进行的，因为图片与文字在行盒中默认的对齐参考线是基线，只要将参考线改变成中心线就可以做到。

但是这一步操作并不是万能的，它是会出错的！

下面我们就用实际例子来说明一下：

首先，我写一个a标签，为了让这个a标签居中，我使用了行高来进行纵向排列。

接下来，我又在a标签的后面插入了一个图片，这个图片的高度与我们的父元素div是相同的。在插入以后，a标签不再居中，而是跑到了下面，这个就是以基线为参考线的结果。

现在，我来使用“vertiacl-align:middle”对它们进行排列。结果。。。

我的图片往下面移动了1px。。。。。

解决方法很简单，将之前所设置的行高删除即可。但是造成这种现象的原因是什么呢，我又进一步做了测试，发现当我之前的行高设置的越大，图片下移得越多。但是，当之前行高刚好加上a标签超出父元素的高度时与父元素高度相等时，也不会发生这种现象。比如，我父元素高度为35px,行高设置为33px,不会出现图片下移的情况。

由此我们可以得出结论，是行盒的影响造成了这种现象。

在文字与图片同时存在的情况下，行盒的高度是所有元素行盒的最大值，并不区分元素的类别，也就是说现在行盒的高度其实是这样的：

可以看到，当我们之前给a标签设置了行高，在插入另一张图片之后，他的实际行高其实已经超过了我们的父元素高度！行盒的中心线也偏离了父元素的中心线。

于是乎，在使用“vertiacl-align:middle”进行对齐操作的时候，就出现了图片下移的现象