【发布时间】:2022-02-12 00:39:33
【问题描述】:
我有一个包装器,它是 display:flex,并且在水平方向上均等地隔开项目。这些项目也有display:flex,但也是flex-direction:column,这些基本上是一个图像和一个包裹在按钮中的跨度。发生的情况是,当跨度中断成 2 行时,它会使图像的顶部未对齐,因此它们看起来不合线,有没有办法解决这个问题?
【问题讨论】:
我有一个包装器,它是 display:flex,并且在水平方向上均等地隔开项目。这些项目也有display:flex,但也是flex-direction:column,这些基本上是一个图像和一个包裹在按钮中的跨度。发生的情况是,当跨度中断成 2 行时,它会使图像的顶部未对齐,因此它们看起来不合线,有没有办法解决这个问题?
【问题讨论】:
您的主 .bottle-refill-options 容器中有 align-items: center,它垂直居中所有内容。
将其更改为align-items: flex-start;,您的所有项目都将沿顶部垂直居中,给出您想要的外观(我认为)
【讨论】: