老师您好,这个评论页关于“score-wrapper”中三个行内元素设置vertical-align引发的疑问
来源:19-3 ratings组件开发-overview开发(3)

浩浩吃
2020-06-20
已经百度看过很多文章了,但都没能解答出我的疑惑,应该是关于vertical-ailgn和行内元素的基线与line-box基线之间的关系
我写的一个demo:
然后当我给中间的img 设置vertical-ailgn:top 的时候 改变的是另外两个行内元素的位置,如下图所示:
但当我给第一个span或者第三个a标签设置vertical-ailgn:top 的时候,改变的却是它自己本身的位置呢?如图所示:
所以这个vertical-align到底该怎么用呢?因为老师的代码里三个都设置了,但我自己用的时候发现其实只设置中间那个或者只设置1和3就行
写回答
1回答
-
ustbhuangyi
2020-06-20
通常 inline-block 排列的元素如果存在 DOM 结构的不同,需要设置 vertical-aligin 对齐。
另外还有一种更简单的对齐方式,利用 Flex 的 align-item:center00
相似问题