如何垂直对齐不同大小的项目？答案

【问题标题】：How to vertically align items with different sizes?如何垂直对齐不同大小的项目？
【发布时间】：2020-09-22 07:25:50
【问题描述】：

当 div 包含嵌套的子元素时，我遇到了垂直对齐项目的问题，请检查：https://codepen.io/akashpen0501/pen/rNaGgXv

注意，容器的固定高度为 200 像素，我希望它们的孩子垂直居中

当前结果：

我想将所有 div 垂直居中对齐，如 必填：

.container {
  display: flex;
  flex-flow: row;
  align-items: center;
  border: 1px solid black;
  height:200px;
}

.container div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span {
  display: block;
}

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

请指教。

【问题讨论】：

你的意思是水平对齐到顶部吗？
@VarshaDhadge：不，垂直。您会注意到中心 div 被向上推（一半）以与其他 div（左右）对齐
align-items: center --> align-items: flex-start ?
我在css-tricks.com/snippets/css/a-guide-to-flexbox推荐这个神奇的 Flexbox 指南
@TemaniAfif：请注意，容器的固定高度为 200 像素，我希望它们的子元素垂直居中，更改为 flex-start 会使它们位于容器的顶部。更新了 codepen 以反映固定的高度 div

标签： html css flexbox

【解决方案1】：

在容器上尝试align-items: flex-start

.container{
  display: flex;
  flex-flow: row;
  align-items: self-start;
  border: 1px solid black;   
}

.container div{
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span{
  display: block;
}

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

【讨论】：

注意，容器的固定高度为 200px，我希望它们的子元素垂直居中，更改为 flex-start 使它们位于容器的顶部

【解决方案2】：

您可以使用基线对齐和伪元素来近似这一点。在下面的示例中将baseline 更改为center，以查看左/右将保持在同一位置。

.container {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  border: 1px solid black;
  height:200px;
  background:linear-gradient(red,red) center/100% 1px no-repeat
}
.container:before {
  content:"";
  height:calc(50% + 0.25em)
}
.container div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span {
  display: block;
}

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

<div class="container">
  <div>left</div>
  <div>center</div>
  <div>right</div>
</div>

【讨论】：

【解决方案3】：

.container {
      display: flex;
      align-items: flex-start; // <----- here
      border: 1px solid black;
    }
    
    .container div {
      margin: 10px;
      padding: 10px;
      border: 1px solid black;
    }
    
    .container span {
      display: block;
    }

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

【讨论】：

【解决方案4】：

将您的子组件包裹在 <div> 中，然后给类 .children 提供以下属性，它将使您的内容 vertically aligned 和 horizontally 保持相同的高度。

.children{
  display: flex;
  align-items: flex-start;
 }

.container {
  display: flex;
  flex-flow: row;
  align-items: center;
  border: 1px solid black;
  height:200px;
}

.container div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span {
  display: block;
}

.children{
  display: flex;
  align-items: flex-start;
}

<div class="container">
  <div class=children>
    <div>left</div>
    <div>center<span class="nested child">nested content</span></div>
    <div>right</div>
  </div>
</div>

【讨论】：