html – 如何在d性项目中垂直居中文本？

概述我只想要文字如下： display: table-cell;vertical-align: middle; 但使用柔性盒 div { border: 1px solid black;}.box { display: flex; flex-flow: column nowrap; justify-content: center; align-content: center 我只想要文字如下：

display: table-cell;vertical-align: mIDdle;

但使用柔性盒

div {  border: 1px solID black;}.Box {  display: flex;  flex-flow: column nowrap;  justify-content: center;  align-content: center;  align-items: stretch;  height: 200px;}.Box div {  order: 1;  flex: 0 1 auto;  align-self: auto;  min-wIDth: 0;  min-height: auto;}.Box div.C {  flex: 1 1 auto;}

<div >  <div >A</div>  <div >B</div>  <div >C</div>  <div >D</div>  <div >E</div>  <div >F</div></div>

解决方法

div {  border: 1px solID black;}.Box {  display: flex;  flex-flow: column nowrap;  justify-content: center;  align-content: center;  align-items: stretch;  height: 200px;}.Box div {  order: 1;  flex: 0 1 auto;  align-self: auto;  min-wIDth: 0;  min-height: auto;  display: flex;            /* NEW */  align-items: center;      /* NEW */}.Box div.C {  flex: 1 1 auto;}

<div >  <div >A</div>  <div >B</div>  <div >C</div>  <div >D</div>  <div >E</div>  <div >F</div></div>

说明

flex formatting context的范围仅限于父子关系.子项之外的Flex容器的后代不参与flex布局,并将忽略flex属性.

在您的布局中,.Box元素是flex容器(父元素),div元素是flex项(子元素).因此,justify-content,align-content和align-items规则适用于div.

但是,文本是另一个级别.它超出了这个flex容器的范围.该文本被视为Flex容器的flex项目/ grand子项的子元素.因此,文本无法接受flex属性.

在CSS中,未由元素显式包装的文本由内联框在算法上包装.这使它成为父内容的匿名内联元素和子元素.

从CSS规范：

07001

Any text that is directly contained insIDe a block container element must be treated as an anonymous inline element.

flexBox规范提供了类似的行为.

07002

Each in-flow child of a flex container becomes a flex item,and each contiguous run of text that is directly contained insIDe a flex
container is wrapped in an anonymous flex item.

因此,文本是flex项的子元素.

所以你需要做的就是将flex项目变成一个flex容器.然后,您可以重复居中规则以垂直和/或水平居中文本.

总结

以上是内存溢出为你收集整理的html – 如何在d性项目中垂直居中文本？全部内容，希望文章能够帮你解决html – 如何在d性项目中垂直居中文本？所遇到的程序开发问题。

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