10

I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.

#container {
    display: flex;
    justify-content: space-between;
    background-color: lightgrey;
}

#container > div {
  height: 100px;
  border: 2px dashed red;
  
  /*This is only for looks*/
  text-align: center;
  padding: 5px;
}
<div id="container">
  <div>Left Side</div>
  <div>I want this centered</div>
  <div>Right Side (Extra text for extra length)</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Alex Wohlbruck
  • 1,340
  • 2
  • 25
  • 41

1 Answers1

14

You can use margins to approximate centering. But in order to get perfect centering with flexbox that's consistent across a variety of viewports, you'll have to slightly modify your HTML somewhat.

You need to turn the direct children of #container into flex containers themselves with a display:inline-flex declaration and give them a flex value of 1 and justify-content: center.

From there, you add your content into child divs. To get alignment on the left and right divs, use margin-right: auto and margin-left: auto, respectively.

#container {
  display: flex;
  background-color: lightgrey;
}
.flex {
  flex: 1;
  display: inline-flex;
  justify-content: center;
}
.flex > div {
  height: 100px;
  border: 2px dashed red;
  text-align: center;
  padding: 5px;
}
.left div {
  margin-right: auto;
}
.right div {
  margin-left: auto;
}
<div id="container">
  <div class="left flex">
    <div>Left Side</div>
  </div>
  <div class="center flex">
    <div>I want this centered</div>
  </div>
  <div class="right flex">
    <div>Right Side (Extra text for extra length)</div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
litel
  • 3,790
  • 3
  • 20
  • 29
  • Just a side note: Because the main container is `nowrap`, the flex items can be `display: inline-flex` or `display: flex`. Either way, the items stay in one row. – Michael Benjamin Sep 29 '16 at 13:21
  • @litel how can that be extended so that left and right would get ellipses but title expands as far as it can grow and then also getting ellipses? – philk Dec 14 '16 at 15:24