我遇到了问题,无法让Safari浏览器正常使用flexbox和justify-content:center
。
HTML:
<div class="flex-row">
<div class="label"> Label </div>
<div class="well"></div>
</div>
CSS:
.flex-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.well {
width: 230px;
height: 200px;
background-color: grey;
}
.label {
z-index: 2;
position: absolute;
margin-top: -8px;
}
在Chrome和FF中,这将提供一个简单的灰色框,并在其上方居中显示标签。然而,在Safari中,标签没有居中。在Safari中打开下面的CodePen示例以查看未居中的标签: 我的直觉是这是Safari中的实现错误,但我想知道是否有任何现有的解决方法。