关于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 阅读(14549) 评论(0) 编辑收藏举报

小潘666

关于vertical-align:middle的理解

公告