html - 对齐元素 : center distorts height of parent

Question

我想构建一个类似轮播的东西，你可以使用滚动条滑动它。每张幻灯片中都有一行文本，应水平和垂直居中。设置 align-items: center 会更改父 div 的高度。

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
}

<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

注释掉align-items，它就合适了。我该如何解决这个问题？

Answer 1

问题不在于align-items: center。这一切都很好。

问题在于您的 Flex 容器是一个内联级框 (display: inline-flex)，它会激活 vertical-align: benchmark 默认设置。

由于中间元素有两行文本，因此该框会调整其基线以与其兄弟元素对齐。 (请注意当每个框都有一行文本时，所有框如何排列。)

只需使用vertical-align: Bottom覆盖默认值即可。

.carousel .slide {
    vertical-align: bottom;
}

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
  vertical-align: bottom;  /* NEW */
}

<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

另请注意:

• 当您删除 align-items: center 时，问题就不存在了，因为默认值为 stretch，它允许文本在基线处对齐(即，第一行)跨越框，无论行数如何( demo )
• flex-start 也可以工作 ( demo )
• flex-end 不会 ( demo )

有关vertical-align:baseline的更多详细信息:

• Why is there a vertical scroll bar if parent and child have the same height?