如何在不丢失父级高度的情况下将 div 中的项目居中？

Question

我有一个容器 div，里面有 2 个跨度。当我尝试align-items: center我失去了height和border-radius跨度的。我希望它们保持高度和边界半径，而只是居中。我怎样才能做到这一点？

父 div 的 CSS：

const Container = styled.div`
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
`;

子跨度的CSS：

const TextContainer = styled.span`
  padding: 8px 11px;
`;

之前align-items: center：

之后align-items: center：

Answer 1

您可以添加display: flex到span和对齐项目。

.container {
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
}

span {
  display: flex;
  padding: 8px 11px;
  background: #f00;
  align-items: center;
}

<div class="container">
  <span>Match Rank</span>
  <span>
  <img src="https://i.picsum.photos/id/83/60/50.jpg" />
  </span>
</div>