19.垂直对齐 vertical-align

我们之前让文字垂直居中都是让行高与容器宽相等

但当我们在容器中加入一张图片，这种方式就会失效

我们可以将其放置在两个不同的盒子中，但这样会很麻烦，这个时候我们就用到了vertical-align

vertical-align只对行内元素或行内块元素生效，它的语法是这样的

• baseline 把元素放置在基线上，默认值
• top 将元素与最高元素顶端对齐
• middle 将元素放置在最长元素的中部（与父元素无关）
• bottom 将元素与最低元素的底端对齐

位置大概是这样的

我们现在想将图片和文字垂直居中对齐，为了证明与父元素无关，我们同时改一下父元素的长度

• 这里只对img设置vertical-align:middle也行，我设置两个的原因是感觉这样易读性更高一些

不止是图像，其他行内块元素同样使用，比如文本域

1  图像与盒子底部缝隙问题

我们现在把父盒子的高度与vertical-align注释掉

发现图片下方与盒子会有一个小缝隙

• 有没有右侧的文字，都会有这样的缝隙

这个是因为盒子默认与文字的底线对齐，而不是图像的底线，我们可以给图片设置vertical-align解决这个问题

• 除了设置为基线 baseline，剩下的都可以

这样下面的缝隙就消失了

我们把图像转换为块级元素同样可以解决这个问题，为了看效果，我们把文字也注释掉

发现下方同样没有缝隙