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

【问题标题】：How to center items in a div without losing height of parent?如何在不丢失父级高度的情况下在 div 中居中项目？
【发布时间】：2020-05-28 02:32:01
【问题描述】：

我有一个容器 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之后：

【问题讨论】：

如果您提供更多信息，它会更有帮助。
@zynkn 如果您提供有关您需要的信息的更多信息会更有帮助
就像一张蓝图，你想做什么，只有前后。你想做什么？
能否请您发布一个 sn-p，或者至少是 HTML，以便我可以测试并找出问题所在？谢谢:)

标签： css reactjs styled-components

【解决方案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>

【讨论】：

成功了，谢谢！不知道为什么我之前没有将其设置为display: flex;，我猜是大脑滞后！

【解决方案2】：

这实际上是由于inline-flex 设置了基线的垂直对齐。

删除align-items 会将其更改为stretch，但您可能不想这样做。

解决方案1

如果你使用 align-items: flex-start

会发生什么

解决方案2

或者您可以尝试将垂直对齐设置为顶部，这可能会解决它。

const TextContainer = styled.span`
    vertical-align: top;
    padding: 8px 11px;
`;

你能试试这些，然后告诉我结果如何？谢谢

【讨论】：

嗯，好像什么都没做。
@Vaibhav 的回答成功了，不过非常感谢您的输入。
很好，很高兴你明白了。