Css 弹性物品被撞倒，正好是前一件物品的一半高度

我将包含一个用于上下文的图像，然后代码：

最右边的框中有“ABC”和左/下边框，正向下撞到它旁边的渐变图像高度的一半。我知道很多高度/等都没有意义，但我已经将它们全部移除，问题依然存在。这里有什么指导吗

HTML：

<div className="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" className="thingImage" />
  <div className="content">
    <span className="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span className="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div className="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" className="thingIcon" />
    <span className="thingAbbrev">ABC</span>
  </div>
</div>

---

对我来说，这个项目的主要重点是学习React，使用Flexbox对我来说只是一个额外的好处。提前感谢，非常感谢您的帮助和指导

您需要设置以下CSS和html

CSS:

.vcenter{
  display: flex;
  align-item: center;
  justify-content: center;
}

  <div class="thingMeta vcenter">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="vcenter"><span class="thingAbbrev">ABC</span></span>
  </div>

此外，我还将

ABC

包装在另一个跨度中，以消除由于边距而产生的高度问题

HTML:

.vcenter{
  display: flex;
  align-item: center;
  justify-content: center;
}

  <div class="thingMeta vcenter">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="vcenter"><span class="thingAbbrev">ABC</span></span>
  </div>

基础知识

---

jsiddle:

由于

thingMeta

不是flex容器（没有

显示：flex；

（1）），因此

thingAbbrev

不是flex项，因此

对齐自：flex开始

将不适用

由于

thingMeta

中的

img

和

span

是正常的内联元素，它们沿基线对齐，因此添加

vertical align:top

将使它们在顶部对齐

东西{
边框：1px实心#ccc；
宽度：564px；
最小高度：68px；
填充：10px；
字体系列：“Helvetica”，arial，无衬线；
字体大小：14px；
线高：18px；
显示器：flex；
}
thingImage先生{
边界半径：5px；
右边距：10px；
}
.thingName{
字体大小：粗体；
右边距：0.3em；
}
thingMeta先生{
左边距：自动；
自我校准：灵活启动；
高度：35px；
}
thingAbbrev先生{
边框底部：中实心#000000；
左边框：中等纯色#000；
/*自对齐：柔性启动；已删除*/
垂直对齐：顶部；/*已添加*/
左侧填充：5px；
垫底：5px；
左边距：10px；
宽度：30px；
}
thingIcon先生{
高度：30px；
}

Jibber Jabb此处电影或事物的超长标题

Rank1:1

Rank2:2

Rank3:2
基础知识

这非常有用。我特别感谢你努力告诉我原因。非常感谢。