固定高度的弹性项目的垂直对齐

Question

为什么我为 flex 容器设置高度后，文本不再垂直居中？我该如何解决这个问题？

ul {
  display: flex;
  list-style: none;
  background: green;
  width: 400px;
  align-items: center;
}

ul li {
  flex: 50%;
}

ul.fail {
  background: red;
}

ul.fail li {
  height: 100px;
}

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

https://jsfiddle.net/na4avkdg/

Answer 1

因为如果设置高度，现在您需要将文本居中 li。

ul {
  display: flex;
  list-style: none;
  background: green;
  width: 400px;
  align-items: center;
}
ul li {
  flex: 50%;
}
ul.fail {
  background: red;
}
ul.fail li {
  height: 100px;
  display: flex;
  align-items: center;
}

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

Answer 2

要解决此问题，您需要为 ul li 声明设置三个新属性。这些包括：justify-content、flex-direction 和 text-align。尝试下面的 HTML & CSS 并检查这是否是您想要的。

JS Fiddle: https://jsfiddle.net/ay5grw9t/

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

ul {
    display: -webkit-box;   
    display: -moz-box;  
    display: -ms-flexbox;  
    display: -webkit-flex; 
    display: flex;
    list-style: none;
    background: green;
    width: 400px;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
/*Changes made below*/
ul li {
    -webkit-box-flex: 50%;   
    -moz-box-flex: 50%;        
    -webkit-flex: 50%;     
    -ms-flex: 50%;          
    flex: 50%;  
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


ul.fail {
  background: red;
}

ul.fail li {
  height: 100px;
}

Answer 3

使用 align-items: center，您的 flex 项目在容器的可用 space 中垂直居中。

在您的第一个示例（绿色容器）中，由于您没有定义高度，第二个项目（具有更多文本的项目）确定了容器的高度。

第一项在第二项设置的高度内垂直居中。

ul {
  display: flex;
  align-items: center;
  list-style: none;
  background: green;
  width: 400px;
}

ul li {
  flex: 50%;
  border: 1px dashed yellow;
}

ul.fail {
  background: red;
}

ul.fail li {
  height: 100px;
}

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

在第二个示例（红色容器）中，容器再次具有 align-items: center 并且没有定义高度。但是，弹性项目设置为 height: 100px.

这些项目实际上位于容器的中心，但由于项目和容器之间没有额外的 space，因此并不明显。

如果您给容器的高度大于 100 像素，您会注意到居中。

ul {
  display: flex;
  align-items: center;
  list-style: none;
  background: green;
  width: 400px;
  height: 150px;  /* new */
}

ul li {
  flex: 50%;
  border: 1px dashed yellow;
}

ul.fail {
  background: red;
}

ul.fail li {
  height: 100px;
}

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

另一个容易混淆的地方可能是弹性项目和文本之间的区别。 HTML 容器的结构实际上是三层，而不是两层：容器、项目和文本。

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

因此，文字不代表弹性项目；它代表一个单独的元素。为了使项目中的文本居中，只需重复容器中的弹性对齐规则：

ul {
  display: flex;
  align-items: center;
  list-style: none;
  background: green;
  width: 400px;
}

ul li {
  flex: 50%;
  border: 1px dashed yellow;
}

ul.fail {
  background: red;
}

ul.fail li {
  height: 100px;
  display: flex;          /* new */
  align-items: center;    /* new */
}

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

固定高度的弹性项目的垂直对齐

Vertical alignment on flex item with fixed height

html

css

centering

flexbox