文本不以 justify-content 居中:center [英] Text not centered with justify-content: center

问题描述

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

当 div 中的内容太长时，内容会自动换行.但是在这种情况下对齐被破坏了.查看代码片段.

如果我添加 text-align: center 它会正确显示.但是为什么没有 text-align: center 不居中?

.box{宽度:100px；高度:100px；背景颜色:浅绿色；边距:10px；}.柔性{显示:弹性；弹性方向:行；flex-wrap: 包裹;对齐项目:居中；对齐内容:居中；}.with-align{文本对齐:居中；}

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

解决方案

flex 容器的 HTML 结构分为三个层次:

• 容器
• 项目
• 内容

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

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

当您在行方向容器上设置 justify-content: center 时，项目会缩小到内容宽度(即缩小以适应)并水平居中.内容在项目内，随心所欲.

一切都很好地居中，当内容比弹性容器窄时.

另一方面，当内容比弹性容器宽时，弹性项目不能再居中.实际上，项目根本无法对齐(start、end、center)，因为没有可用空间 –该项目正在消耗容器的整个宽度.

在这种情况下，文本可以换行.但是 justify-content: center 不适用于文本.它从来没有.文本始终遵循默认的 text-align: start (left in LTR/right in RTL).

因此，要直接居中文本，请将 text-align: center 添加到 flex item(或 flex 容器，由于 继承).

article {显示:弹性；对齐项目:居中；对齐内容:居中；}.中央 {文本对齐:居中；}/* 仅演示样式 */文章 {宽度:100px；高度:100px；边距:10px；背景颜色:浅绿色；}

<p>这里有一些长文本</p></文章><文章><p class="center">这里有一些长文本</p></article>

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