在使用justify-content:stretch;
时,我试图将flexbox项目的内容居中。在这种情况下,使用display:table-cell;vertical-align:middle;
的老把戏似乎行不通。什么能做到?
.flex-container {
display:flex;
align-items:center;
justify-content:stretch;
}
.flex-item {
align-self:stretch;
}
<div class="flex-container">
<div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>
在你回答之前:对于我的问题似乎有很多困惑。我正在尝试将flex-item的内容居中。使用justify-content:stretch
,项目的高度将拉伸到容器的整个高度,但项目的内容会浮动到顶部(至少在Chrome中是这样)。
“一张图片胜过千言万语。”(A)是我已经得到的。(B)是我想要的。
https://stackoverflow.com/questions/28254332
复制相似问题