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项置于flex-container中，因此您需要在父元素上设置display: flex。

＆＃13;

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

＆＃13;

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>

＆＃13;

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

1 个答案: