html – 文本不以justify-content：center为中心

概述我有一个显示div：flex.其内容水平和垂直居中. 当div中的内容太长时,内容会自动换行.但在这种情况下,对齐被打破了.请参阅代码段. 如果我添加text-align：center,它会正确显示.但是为什么它没有文本对齐中心？ .box{ width: 100px; height: 100px; background-color: lightgreen; margin: 10p 我有一个显示div：flex.其内容水平和垂直居中.

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

如果我添加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 >  some long text here</div><div >  some long text here</div>

解决方法 Flex容器的HTML结构有三个级别：

>容器
>该项目
>内容

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

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

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

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

另一方面,当内容比柔性容器宽时,柔性项目不再能够居中.实际上,该项目根本无法对齐(开始,结束,居中),因为没有可用空间 – 该项目正在消耗容器的整个宽度.

在这种情况下,文本可以包装.但是,证明内容：中心不适用于文本.它从来没有.文本始终受默认的text-align: start(在LTR中左侧/ RTL中的右侧).

因此,要直接居中文本,将text-align：center添加到flex项目(或Flex容器,由于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 >some long text here</p></article>

总结

以上是内存溢出为你收集整理的html – 文本不以justify-content：center为中心全部内容，希望文章能够帮你解决html – 文本不以justify-content：center为中心所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。