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

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 小提琴：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，您的弹性项目在容器的可用空间中垂直居中。

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

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

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。

实际上，这些项目在容器中居中，但由于项目和容器之间没有多余的空间，所以并不明显。

如果你给容器一个大于 100px 的高度，你会注意到居中。

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

直接包含在块容器元素中的任何文本 必须被视为匿名内联元素。

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

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>