对齐的根本——浅谈行盒

当咱们在一个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”进行对齐操做的时候，就出现了图片下移的现象