文本不以justify-content:center为中心

Question

我有一个div display: flex.其内容水平和垂直居中.

当div中的内容太长时,内容会自动换行.但在这种情况下,对齐被打破了.请参阅代码段.

如果我添加text-align: center它显示正确.但为什么不在没有中心text-align: center？

.box{
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
}

.flex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.with-align{
  text-align: center;
}

<div class="box flex">
  some long text here
</div>

<div class="box flex with-align">
  some long text here
</div>

Answer 1

Flex容器的HTML结构有三个级别:

• 容器
• 这个项目
• 内容

每个级别代表一个独立的独立元素.

该justify-content属性设置在Flex容器上,用于控制弹性项目.它无法直接控制项目的子项(在本例中为文本).

当您justify-content: center在行方向容器上设置时,项目缩小到内容宽度(即缩小到适合)并且水平居中.在项目内的内容随身携带.

当内容比flex容器窄时,一切都很好地居中.

另一方面,当内容比柔性容器宽时,柔性项目不再能够居中.事实上,该项目不能在所有对齐(start,end,center),因为天下没有免费的空间-该项目被消耗容器的整个宽度.

在这种情况下,文本可以包装.但justify-content: center不适用于文字.它从来没有.文本始终受默认值限制text-align: start(left在LTR/rightRTL中).

因此,要直接居中文本,添加text-align: center到flex项目(或Flex容器,由于继承,它并不重要).

article {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}

/* demo styles only */
article {
  width: 100px;
  height: 100px;
  margin: 10px;  
  background-color: lightgreen;
}

<article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article>