垂直对齐不适用于弹性项目

Question

我尝试将纯文本垂直集中在弹性框元素内。

我决定使用属性 display:table-cell 和 vertical-align: middle。但它似乎在 flexbox 元素中不能正常工作。

如何在不使用包装器或定位的情况下将其垂直居中，同时仍然用省略号截断长文本？

.container {
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  display: table-cell;
  vertical-align: middle;
  flex: 1 1;
  background-color: cyan;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}

<div class="container">
  <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>

View On CodePen

Answer 1

Blockquote ...float, clear and vertical-align have no effect on a flex item. according to https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有关可能的解决方案，请参阅 How to vertically align text inside a flexbox?。

Answer 2

当您将元素设为弹性容器（使用 display: flex 或 display: inline-flex）时，所有流入的子元素都会成为弹性项目。

所有弹性项目的 display 值都由容器控制。不管你指定什么，容器都会覆盖它。

所以当你给一个 flex 项目 display: table-cell 时，浏览器会忽略它。这是 Chrome 开发工具中的样子：

样式选项卡

计算选项卡

弹性容器 "blockifies" 弹性项目，使它们具有块级元素的许多特性 (source)。

但 vertical-align 属性仅适用于行内级和 table 单元格元素 (source)。

这就是它不起作用的原因。

无论如何，vertical-align，即使它有效，在这种情况下也是完全不必要的黑客攻击。有一些 flex 属性是为对齐 flex 项目中的内容而设计的。

.container {
  width: 500px;
  height: 500px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 1;
  display: flex;
  justify-content: center; /* horizontal alignment, in this case */
  align-items: center;     /* vertical alignment, in this case */
  background-color: cyan;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}

<div class="container">
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>

相关帖子：

How to vertically align text inside a flexbox?

Answer 3

您必须将这些项目也定义为弹性容器，为它们使用以下 CSS（没有 table-cell 显示...）：

display: flex;
flex-direction: column;
justify-content: center;

.container {
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  background-color: cyan;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}

<div class="container">
  <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>

Answer 4

一种解决方案是将每个弹性项目定义为自己的弹性容器，以便将其内容垂直居中 align-items:center。要保持 text-overflow 正常工作，请向每个弹性项目添加一个子元素，然后可以用省略号将其截断。

关于为什么 text-overflow 不适用于 display:flex 和 neither can David Wesst，我无法提供简洁的解释。用他的话说：

It turns out that there really isn't a clean way to do this. If you're wondering how I came to that conclusion you can stop because I didn't. Those responsible for the specification did, and you can read the full conversation that started with a Mozilla bug report and leads to a whole mail group discussion about why it should (or, in this case, should not) be implemented as part of the spec.

这是一个工作示例：

.container {
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: cyan;
}

.item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}

<div class="container">
  <div class="item"><span>Hello, I'm very very long string! Hello, I'm very very long string!</span></div>
  <div class="item"><span>Hello</span></div>
  <div class="item"><span>Hello</span></div>
  <div class="item"><span>Hello</span></div>
</div>

另见：

垂直对齐不适用于弹性项目

Vertical-align doesn't work on flex item

html

css

vertical-alignment

flexbox