关于vertical-align:middle的理解

在这里先借用一下张鑫旭大神的概念——幽灵空白节点:

什么是幽灵空白节点呢?

如下图,我们在一个容器里有两个内联块,左边内联块里是一个图片,右边是内联块里是文本,我们可以看到中间有一块空白的地方

 

关于单行或者多行居中的问题就是从它开始的。

1.如果只有一个图片我们想让它垂直居中:

我们只给图片设置vertical-align:middle 是不起作用的 ,是因为这句话是:将支持valign特性的对象的内容与对象中部对齐 ,看起来是有些拗口,我们这样翻译:

支持vertical特性的对象是内联块,意思就是两个内联块中部对齐。所以我们可以利用这个幽灵空白节点,让图片与这个空白节点的中部对齐就可以实现图片的垂直居中

代码如下:

<div class="box">
<div class="photo"></div>
</div>
.box {
width: 300px;
height: 300px;
border: 1px solid;
  line-height: 300px; //给父容器设置line-height,幽灵空白节点就会继承父容器的line-height,从而把内联块的高度撑开,空白节点在中间,于是与图片近似对齐
}
.photo {
display: inline-block;
width: 100px;
height: 100px;
background: url("product.png");
}

此时我们实现了图片的近似垂直居中,为什么说是近似呢,而恰恰又是因为幽灵空白节点的存在,因为两者对齐位置与文本的中线其实不在一个水平线上,要偏移一点点,这样的误差在文本字体小的时候肉眼
很难分辨,但是文本字体大的时候就杯具(>﹏<)了,如图:
我什么都没做就是把父布局的字体变大了而已~~~~(>_<)~~~~


所以我们该怎么减少这样的误差呢,可以想到当文本的中线与对齐的那条线只要重合就好了,我们可以想象成当font-size趋近于0的时候,文本高度越来越小,那么两条线就越来越近,当font-size等于0的时候文本就变成了重合的一条线(个人理解),所以解决问题的办法就是,给父容器的font-size设为0,此时文本两条线重合,于是问题解决。

所以同理,我们就可以解决单行文本文本与图片垂直居中的问题了,可以给文本设置和父布局高度相等的line-height(或者直接给父布局设置line-height),然后让图片

vertical-align:middle。

2.下面我们来说一下多行文本与图片居中对齐的问题:

首先我们父容器里的左边还是一个图片,右边是内联块,这个块里有多行文本,如果我们先让图片垂直居中的话,同上

 

.box {
width: 300px;
height: 300px;
border: 1px solid rebeccapurple;
line-height: 300px;
}
.photo {
display: inline-block;
width: 100px;
height: 100px;
background: url("product.png");
vertical-align: middle;
}
.text {
display: inline-block;
line-height: 10px; //这里重写line-height,不然内联块会被撑过大
width: 70px;
height: 70px;
border: 1px solid;
}

<div class="box">
<div class="photo"></div>
<div class="text">
<p>XXXXX</p>
<span>XXXXX</span>
</div>
</div>

 

可以看到图片垂直居中了,并且我们发现右边内联块第二行XXXXX的下边缘与图片中线对齐,其实可以说是和幽灵空白节点的中线对齐,我们并没有写右边内联块的vertical-align

对齐方式,但它有个默认值是baseline,基线(字母X的下边缘)对齐,(有文本的内联块的基线是最后一行文本的的基线,空的内联块的基线是底线)所以我们知道了,可以吧幽灵空白节点当参照物呀,把右边的内联块设置成vertical-align:middle,此时不就和幽灵空白节点的中线(和图片的中线)也对齐了吗,所以我们在 .text中加上 vertical-align:middle 就好了,如图

可喜可贺,就是这个样子,至于误差的问题,还是一样的道理,让幽灵空白节点的font-size为0(父容器的font-size为0,子容器的字体大小重新设置就好),问题解决。

 (看我这么萌,赞一个吧O(∩_∩)O)

posted @ 2017-04-16 14:32  小潘666  阅读(...)  评论(...编辑  收藏