首页 文章

设置margin：inline-flex容器上的auto不能按预期工作

提问于
浏览 次
0

我想在父div中居中一个inline-flex容器，但设置margin：auto不会做任何事情，即使父div比flex容器宽 . （从结果中可以看出）

将justify-content设置为center不会给出想要的结果 .

我试着在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;
}

Result ：
enter image description here

html css twitter-bootstrap css3 flexbox

1 回答

  • 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>
    回复于

相关问题