文本未居中对齐内容：居中

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结构具有三个级别：

• 容器
• 该项目
• 内容

每个级别代表一个独立的独立html" target="_blank">元素。

该justify-content属性是在flex容器上设置的，用于控制flex项目。它不能直接控制项目的子项（在这种情况下为文本）。

justify-content: center在行方向容器上设置时，项目将缩小到内容宽度（即缩小以适合）并水平居中。物品内的物品随身携带。

当内容比flex容器窄时， 一切都将居中。

另一方面， 当内容比flex容器宽时
，flex项将不再居中。实际上，由于没有可用空间，因此根本无法对齐项目（start，，）–项目占用了容器的整个宽度。end``center

在这种情况下，文本可以换行。但justify-content: center不适用于文字。从来没有。文本始终受默认设置 text-align: start
（left在LTR中/ right在RTL中）。

因此，要直接将文本居中，请添加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>