对齐内部项目

Question

我有一个包含多个项目的显示器。每个项目都有一张图片，上面和下面都有文字。图片的大小都是相同的，因此我想使图片的每一行都与图片对齐，但是我找不到找到与内部项目对齐的方法。

我正在使用React构建选择器。每行选项中有两个或三个项目，并且可以有很多选项。我试过将它们放在网格/弹性盒中并居中对齐，但是如果它们在顶部或底部的文字量不同，则会将图像进一步推到底部或顶部。

我的选择器如下：

<div className='selector'>
  {items.map(i => {
    <div>
      <span>{i.title}<span>
      <img src={i.image} />
      <span>{i.subtext}</span>
    <div>
  })}
</div>

我的CSS：

.selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

编辑：这里的主要问题是顶部和底部内容都可以具有可变的高度。我想在两个项目之间对齐内容，但顶部和底部的内容大小可能彼此不同，而其他项目的顶部/底部内容可能不同。