老师您好,这个评论页关于“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:center

0
0

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程