Verticle-align

news2025/1/11 14:11:26

1.verticle-align的官方解释及所产生的疑问

1.1 vertical-align的官方解释

vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置 【这里有重点词汇，一个行盒，行内块元素，为什么不包括块元素呢，因为块元素是独占一行的】

1.2 关于行盒的快问快答

思考：一个div没有设置高度的时候，会不会有高度？
   1.没有内容，没有高度
   2.有内容，内容撑起来高度

内容撑起来高度的本质是什么呢？
	1.内容有行高（line-height），撑起来了div的高度

行高为什么可以撑起div的高度？
	1.这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的内容

1.3 vertical-align – 不同情况分析

情况一：只有文字时，line boxes如何包裹内容？（注意：红色是包裹的div，下面也都一样）

在这里插入图片描述

情况二：有图片，有文字时，line-boxes如何包裹内容？

在这里插入图片描述

情况三：有图片，有文字，有inline-block（比图片要大）如何包裹内容？

在这里插入图片描述

情况四：有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom，如何包裹内容？

在这里插入图片描述

情况五：有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字，如何包裹内容？

2.vertical-align的属性

2.1 vertical-align的baseline

为什么上面的对其方式这么奇怪？
	因为line-boxes一定会想办法包裹住当前行中所有的内容

baseline是什么呢？
	1.文本的baseline是字母x的下方
    2.Inline-block默认的baseline是margin-bottom的底部（没有margin-bottom，就是盒子的底部）
    3.Inline-block有文本时，baseline是最后一行文本的x的下方

2.2 vertical-align的其他值

1.baseline(默认值)：基线对齐（你得先明白什么是基线）
2.top：把行内级盒子的顶部跟line boxes顶部对齐
3.middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐【这种方式只能做到文本在当前行盒居中，但是对于inline-block元素无法做到居中，因为他会和当前行的文本x-height一半对齐】
4.bottom：把行内级盒子的底部跟line box底部对齐
5.<percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一
样
6.<length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样