内联 - 柔性定心和间隙问题

Question

我想display: inline-flex;在块容器中居中两个div ,但不知何故align-items: center;并且justify-content: center;不起作用.只有text-align:center; 有效,但它不应该是那样的(因为我已经阅读过display:inline-flex;它应该是align-items和justify-content)我猜？如果我的解决方案是正确的,那么你能告诉我有什么区别吗？

另外,我想摆脱这两个居中的div之间的那个小差距,但我已经尝试了一些来自互联网的解决方案,但没有一个有效.为什么？

如果你们能帮助我解决我的两个问题,我会很高兴的.

这是代码示例:

.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>

Answer 1

如果你使用display: flex容器元素,它将工作.align-items并justify-content在flex-container中定位flex项,因此您需要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>