我想将两个divdisplay: inline-flex;放在一个块容器内居中，但是不知何故align-items: center;而且justify-content: center;不起作用。仅文本对齐：居中；可以，但是不应该那样（因为我已经用display读取了它：inline-flex；应该是align-items和justify-content）我猜是吗？如果我的解决方案正确，那么您能告诉我有什么区别吗？
另外，我想摆脱这两个居中的div之间的微小缝隙，但是我已经尝试了一些来自Internet的解决方案，但没有一个可行。为什么？
如果你们能帮我解决我的两个问题，我会很高兴。
这是代码示例：
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
text-align: center;
}
.child, .child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>如果display: flex在容器元素上使用，它将起作用。align-items并将justify-contentflex项目放置在flex-container中，因此您需要display: flex在父元素上进行设置。
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.child,
.child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句