老师您好，这个评论页关于“score-wrapper”中三个行内元素设置vertical-align引发的疑问

Question

已经百度看过很多文章了，但都没能解答出我的疑惑，应该是关于vertical-ailgn和行内元素的基线与line-box基线之间的关系
我写的一个demo:


然后当我给中间的img 设置vertical-ailgn:top 的时候 改变的是另外两个行内元素的位置，如下图所示：

但当我给第一个span或者第三个a标签设置vertical-ailgn:top 的时候，改变的却是它自己本身的位置呢？如图所示：


所以这个vertical-align到底该怎么用呢？因为老师的代码里三个都设置了，但我自己用的时候发现其实只设置中间那个或者只设置1和3就行

Answer 1

ustbhuangyi 2020-06-20 18:15:33

通常 inline-block 排列的元素如果存在 DOM 结构的不同，需要设置 vertical-aligin 对齐。
另外还有一种更简单的对齐方式，利用 Flex 的 align-item:center