为什么我需要“text-align：center”当容器有“证明内容：中心”？ [英] Why do I need "text-align: center" when the container has "justify-content: center"?

问题描述

我有一个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;理由-content：center;}。with-align {text-align：center;}  

 < div class =box flex>这里有一些长文字< / div>< div class =box flex with-align>一些长文本在这里< / div>  

解决方案

justify-content：center 对齐flex项目，这是一个 blockified元素 在 flex格式化上下文 。这意味着 justify-content 将包含文本的文本框作为目标。
$ b text-align ：center 目标内容（如文本和图像）在容器内（在这个例子中是一个flex项目）。

容器的宽度足够宽，所以文本不需要换行，你会发现flex项目和它们的文本都居中，而不需要 text-align：center ：

data-babel =false>

.box {width：200px; / *调整* /高度：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; } < code>< div class =box flex >这里有一些长文字< / div>< div class =box flex>一些长文字在这里< / div>

容器的尺寸小于flex项目时，该项目保持居中，但包装文本的内联框不居中，除非您使用 text-align 。

.box {width：100px; height：100px; background-color：lightgreen; margin：10px;}。flex {display：flex; flex-direction：row; flex-wrap：wrap; align-items：center;理由-content：center;}。with-align {text-align：center;}

 < div class =box flex>这里有一些长文字< / div>< div class =box flex with-align>这里有一些长文字< / div>  

I've got a div with display: flex. Its content is centered horizontally and vertically.

When content is too long in the div, the content wraps. But the alignment is broken in this case. See the snippet.

If I add text-align: center it displays correctly. But why doesn't it center without 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>

解决方案

justify-content: center aligns the flex item, which is a "blockified" element in a flex formatting context. This means justify-content targets the box which contains the text.

text-align: center targets inline content, such as text and images, within the container (in this case, a flex item).

If you give the container enough width so the text doesn't need to wrap, you'll see that both flex items and their text are centered without a need for text-align: center:

.box {
  width: 200px;        /* adjusted */
  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">
  some long text here
</div>

However, when the width of the container is smaller than the flex item, the item remains centered, but the inline boxes wrapping the text are not centered unless you target them with text-align.

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

这篇关于为什么我需要“text-align：center”当容器有“证明内容：中心”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！