align-items：中心扭曲父级的高度 [英] align-items: center distorts height of parent

问题描述

我想构建一个类似旋转木马的东西，您可以使用滚动条滑动它。在每张幻灯片中，一行文字都应水平居中和垂直居中。
设置 align-items：center 更改父级 div 的高度。

I want to build, something like a carousel, that you can slide using a scrollbar. In each of the slides, there's a single line of text that should be both horizontally and vertically centered. Setting align-items: center changes height of the parent 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 ，就可以了。我应该如何解决此问题？

Comment out the align-items and it fits alright. How should I resolve this issue?

推荐答案

问题不是 align-items：center 。一切都很好。

The problem is not align-items: center. That's all good.

问题是您的flex容器是一个内联级别的框（显示：inline-flex ），它会激活 vertical-align：基线默认设置。

The problem is that your flex container is an inline-level box (display: inline-flex), which activates the vertical-align: baseline default setting.

由于中间项有两行在文本中，该框会将其基线调整为与同级对齐。 （请注意，当每个方框都有一行文本时，它们如何对齐。）

Since your middle item has two lines of text, the box adjusts its baseline to line-up with its siblings. (Notice how all boxes line up when they each have a single line of text.)

只需使用 vertical-align：bottom <覆盖默认值即可。 / code>。

Just override the default with 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 ，它使文本可以跨框与基线（即第一行）对齐，而不管行数（演示）


• flex-start 也可以使用（演示）


• flex-end 不会（ demo ）

• the problem doesn't exist when you remove align-items: center because the default value is stretch, which allows the text to align at the baseline (i.e., first line) across boxes regardless of the number of lines (demo)
• flex-start would also work (demo)
• flex-end would not (demo)

有关 vertical-align：基线：

• 为什么会有垂直滚动

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

这篇关于align-items：中心扭曲父级的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！