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

因为如果设置了高度，现在需要将文本置于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; }内。

＆＃13;

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

＆＃13;

Answer 2

使用align-items: center，您的弹性项目将在容器的可用空间中垂直居中。

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

第一项垂直居中于第二项设定的高度。

＆＃13;

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

＆＃13;

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

＆＃13;

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

事实上，这些物品集中在容器中，但由于物品和容器之间没有额外的空间，所以它并不明显。

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

＆＃13;

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

＆＃13;

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

＆＃13;

另一个混乱的区域可能是弹性项目和文本之间的差异。容器的HTML结构实际上是三个级别，而不是两个级别：容器，项目和文本。

来自CSS规范：

9.2.2.1 Anonymous inline boxes

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

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

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

Answer 3

要解决此问题，您需要为ul li声明设置三个新属性。这些包括：justify-content，flex-direction和text-align。试试下面的HTML＆amp; 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;
}

固定高度的柔性物品上的垂直对齐

3 个答案: