具有固定高度的 flex 项目的垂直对齐

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/

- nerdess

---

实际上，li 仍然位于中心，如果你给 li 元素着色，就可以看到它。在提及高度之前，li 元素采用其内容的高度，因此内容（实际上是 flex 元素的子元素的子元素）位于中心。因此，你可以将 flex 应用于 li 元素，或者删除高度。 - Mr_Green

Answer 1

使用 align-items: center，可以使得 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;
}

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

实际上，项目在容器中居中对齐，但由于项目与容器之间没有额外的空间，因此不太明显。

如果您给容器一个大于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>

另一个可能令人困惑的领域是flex项目和文本之间的区别。您的容器的HTML结构实际上是三层，而不是两层：容器、项目和文本。

来自CSS规范：

“9.2.2.1匿名内联框”

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

因此，文本并不代表flex项目；它代表一个单独的元素。为了将文本居中显示在项目中，只需从容器中重复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>

- Michael Benjamin

Answer 2

如果您设置了高度，现在需要将文本居中在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>

- Nenad Vracar

Answer 3

要解决这个问题，您需要将三个新属性设置为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;
}

- LearnHey