我有一个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;
justify-content: center;
}
.with-align{
text-align: center;
}Run Code Online (Sandbox Code Playgroud)
<div class="box flex">
some long text here
</div>
<div class="box flex with-align">
some long text here
</div>Run Code Online (Sandbox Code Playgroud)