html - 设置边距 :auto on inline-flex container doesn't work as expected

Question

我想将 inline-flex 容器置于父 div 的中心，但设置 margin:auto 不会执行任何操作，即使父 div 比 flex 容器宽。 (从结果可以看出)

将 justify-content 设置为居中不会给出想要的结果。

我试图在 css 中设置 display:inline-flex 以查看它是否是 Bootstrap 问题，但没有成功。

我已经设置了背景色来可视化对象的颜色。

HTML:

<div class="d-none d-md-block" style="background-color:blue;">
    <div class="d-inline-flex flex-wrap lc-product-thumb-wrap">
        <img src="demo1.png" class="lc-product-thumb-img" id="thumb-0" />
        <img src="demo1.png" class="lc-product-thumb-img" id="thumb-1" />
        <img src="demo2.png" class="lc-product-thumb-img" id="thumb-2" />
    </div>
</div>

CSS:

.lc-product-thumb-wrap {
  background-color: pink;
  margin: auto;
}

.lc-product-thumb-wrap .lc-product-thumb-img {
  width: 98px;
  margin: 2px;
  padding: 4px;
  border: 1px solid #003c02;
  background-color: #dafac1;
}

结果:

Answer 1

因为它是行内元素，margin:auto 将不起作用，使用 text-align:center; 到 .d-md-block.

.d-md-block {
  text-align: center;
}

.lc-product-thumb-wrap {
  background-color: pink;
  margin: auto;
}

.lc-product-thumb-wrap .lc-product-thumb-img {
  width: 98px;
  margin: 2px;
  padding: 4px;
  border: 1px solid #003c02;
  background-color: #dafac1;
}

<div class="d-none d-md-block" style="background-color:blue;">
  <div class="d-inline-flex flex-wrap lc-product-thumb-wrap">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="lc-product-thumb-img" id="thumb-0" />
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="lc-product-thumb-img" id="thumb-1" />
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="lc-product-thumb-img" id="thumb-2" />
  </div>
</div>