文本不以justify-content：center为中心 [英] Text not centered with 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;理由内容：中心;}。with-align {text-align：center;}  

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

div>

Flex容器的HTML结构有三个层次：

• 容器


• 项目


• 内容

每个级别代表一个独立的独立元素。 p>

在flex容器上设置的 justify-content 属性控制着flex项目。它无法直接控制该项目的子项（本例中为文本）。

设置 justify-content：center 在行方向容器上，项目缩小到内容宽度（即缩小到适合）并且水平居中。

所有内容都很好地居中，当内容比flex容器窄时， 。另一方面，当内容比flex容器更宽时，Flex项目不能再居中。 事实上，该项目根本不能对齐（ start ， end ， center ），因为没有可用空间–该项目正在消耗容器的全部宽度。

在这种情况下，文本可以换行。但是 justify-content：center 不适用于文本。它从来没有。该文本始终受默认 <$ c在LTR / 右边 （ left



因此，要直接将文本居中，请添加 text-align：center 到flex项目（或flex容器，由于 truedata-babel =false>

文章{display：flex; align-items：center; justify-content：center;}。center {text-align：center;} / *仅限演示样式* / article {width：100px; height：100px; margin：10px; background-color：lightgreen;}

< article> < p>一些长文字在这里< / p>< / article><文章> < p class =center>一些长文字在这里< / p>< / article>

b $ b

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>

解决方案

The HTML structure of a flex container has three levels:

• the container
• the item
• the content

Each level represents a separate, independent element.

The justify-content property, which is set on flex containers, controls flex items. It has no direct control over the children of the item (the text, in this case).

When you set justify-content: center on a row-direction container the item shrinks to the content width (i.e., shrink-to-fit) and is horizontally centered. The content, being inside the item, goes along for the ride.

Everything is centered nicely, when the content is narrower than the flex container.

On the other hand, when the content is wider than the flex container, the flex item can no longer be centered. In fact, the item cannot be aligned at all (start, end, center) because there is no free space – the item is consuming the full width of the container.

In such cases, the text can wrap. But justify-content: center doesn't apply to the text. It never did. The text was always subject to the default text-align: start (left in LTR / right in RTL).

Therefore, to center the text directly, add text-align: center to the flex item (or the flex container, it doesn't really matter due to inheritance).

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>

这篇关于文本不以justify-content：center为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！