2

I want to center an inline-flex container inside of parent div, but setting margin:auto doesn't do anything even though the parent div is wider than the flex container. (as you can see from the result)

Setting justify-content to center doesn't give the wanted result.

I tried to set display:inline-flex in the css to see if it was a Bootstrap issue, but no go.

I've set the background-color's to visualize the object's.

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
SteinTheRuler
  • 3,549
  • 4
  • 35
  • 71
  • `margin: auto` works on block elements. Now with `inline-flex` the clue should be kinda in the name ... – CBroe Aug 31 '17 at 08:41

2 Answers2

6

As it's inline element, margin:auto won't work, use text-align:center; to .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>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
  • If the asker was thinking of `margin: auto` in a flex context, then it doesn't work because the parent is not a flex container, not because it is an inline-level element (which, incidentally, it wouldn't be, if the parent were a flex container, since flex items automatically become block-level elements). – Michael Benjamin Aug 31 '17 at 17:50
  • @Michael_B: The parent div is a .d-md-block, so it's safe to assume it's not a flex container. – BoltClock Aug 31 '17 at 18:50
  • @BoltClock, yes, I saw that. But since the question was about `margin: auto`, which is normally not used for centering in a block formatting context -- it's usually `margin: 0 auto`, and [`margin: auto` doesn't even work](https://stackoverflow.com/q/34552116/3597276) -- I figured that the asker was thinking in terms of a flex formatting context, where [`margin: auto` does center vertically and horizontally](https://stackoverflow.com/a/34552444/3597276). – Michael Benjamin Aug 31 '17 at 18:59
0

For anyone still looking for an answer.

A very simple way to do this is by adding :before and :after pseudo-elements on the inline-flex element and adding flex: 1; to them.

Those two pseudo-elements will take up the available space remaining and will have no width when there is none.

.lc-product-thumb-wrap below, is the class of the inline-flex element

.lc-product-thumb-wrap {
  width: 100%;
}

.lc-product-thumb-wrap:before,
.lc-product-thumb-wrap:after {
  content: '';
  display: block;
  flex: 1;
}
Alexandros Apostolou
  • 1