1

THIS post offers an excellent solution as of how to override the value of justify-content since there is no justify-selfavailable, however the problem I am facing a notch higher in magnitude. I don't want to just override the value of justify-content , but place an item at exactly the center of the wrapper horizontally. Let's get to the code:

HTML:

<div class="wrapper">
  <div class="bx"></div>
  <div class="bx move-it"></div>
  <div class="bx"></div>
</div>

CSS:

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bx {
  height: 20px;
  width: 20px;
  background: red;
}

.wrapper > div:first-child {
  width: 300px;
}

.wrapper > div:nth-child(2) {
    background: pink;
 }

/*.move-it {
    background: pink;
    margin-right: auto;
    margin-left: auto;
}*/

I have commented the last line of code deliberately, two thing to notice here, I want the pink div in the middle to be horizontally center, notice how since the first div is much bigger in width it (pink div) does't get aligned in the center. (P.S. its flexbox's space-between at work here.). So well how do i align the pink div in the middle ?

FIDDLE HERE

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
  • I marked this as a duplicate because the [top answer](http://stackoverflow.com/a/33856609/3597276) contains a complete answer (see BOX #71) to your question. If you feel this is not a dupe post a comment. – Michael Benjamin Mar 05 '16 at 17:39
  • @Michael_B ohh .. its u again ! haha Thanks . let me go through that answer tomorrow. – Alexander Solonik Mar 05 '16 at 18:30

0 Answers0