我想将 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;
}
最佳答案
因为它是行内元素,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>
关于html - 设置边距 :auto on inline-flex container doesn't work as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45976937/