我有一个使用display: flex
的
,它的内容在水平和垂直方向上都是居中的。
当
中的内容过长时,会自动换行。但这种情况下对齐方式会被打破,可以在代码片段中看到。
如果添加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;
}
<div class="box flex">
some long text here
</div>
<div class="box flex with-align">
some long text here
</div>