Question

我想构建一个类似旋转木马的东西，你可以用滚动条滑动。在每个幻灯片中，只有一行文本应该是水平和垂直居中的。设置align-items: center会更改父div的高度。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

评论align-items，它很合适。我该如何解决这个问题？

Answer 1

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

问题是您的Flex容器是内联级别的框（display: inline-flex），它会激活vertical-align: baseline默认设置。

由于您的中间项目有两行文本，因此该框会调整其基线以与其兄弟姐妹对齐。（注意当每个框都有一行文本时，所有框都排成一行。）

只需使用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?

align-items：center扭曲父级的高度

1 个答案: