css - 如何在不丢失父级高度的情况下将元素居中放置在 div 中？

Question

我有一个容器 div，里面有 2 个 span。当我尝试 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>