How to align a div center regardless of the divs either side

Question

Here is the basic html, the .left and .right divs I have no control over their widths, they could be smaller or greater that I have now, but regardless of their width I need to keep the center div always in the center of the .inner container.

Because left is only 200px wide and right is 400px wide, the .center container is not in the center.

    .header{
      background-color: blue;
      height: 60px;
      width: 100%;
    }
    .inner{
      width: 1200px;
      margin: 0 auto;
      height: 60px;
      background-color: pink;
    }
    .left{
      width: 200px;
      min-width: 0px;
      max-width: 500px;
      height: 60px;
      background-color: red;
      display: inline-block;
      opacity: 0.2;
    }
    .center{
      width: 100px;
      height: 60px;
      background-color: blue;
      display: inline-block;
      margin: 0 auto;
      opacity: 1;
    }
    .right{
      width: 400px;
      min-width: 0px;
      max-width: 500px;
      height: 60px;
      background-color: red;
      float: right;
      opacity: 0.2;
    
    }

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    
      <div class="header">
          <div class="inner">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
      </div>
      
    </body>
    </html>

I have uploaded the jsbin here

Any pointers or solutions most welcome

possible duplicate of : https://stackoverflow.com/q/38948102/8620333 — Temani Afif, Jan 12 '19 at 13:41
Let's imagine that the left div wants to take up 50% of the width. What needs to happen? Do you want to have part of that div off screen? Do you want to have the left div take up less space (you say you don't want to control its width?). One more question, is the width of the center div always the same? Or is that also flexible? — Bob, Jan 12 '19 at 13:59
@Bob good questions. Center will always be the same width 100px. left and right can have a max-width of 500px and a min width of 0px — Bill, Jan 12 '19 at 14:02
@Bill and what if the left div is too large to get the center div in the center, do you want to overlap them? Or have the left div move more left so that part of it is off the screen? Or can it's width be ajdusted to get the center div in the middle? — Bob, Jan 12 '19 at 14:12
I have edited the above to make .inner a fixed width of 1200px and added min and max widths to left and right, I think this defines the issue more, thank you — Bill, Jan 12 '19 at 14:14

score 0 · Answer 1 · answered Jan 12 '19 at 17:48

Constraints of the question: goal is to center .center in a container. Note sure this 100% covers everything but should give a good start at the very least. Pay attention to all the comments in the CSS per each setting. More verbose to show context and added borders and colors to illustrate.

Center must be centered on the containing element defined as .inner class
Container .inner has a width
.left and .right elements have various content
Use a max 1200px width so left and right hand take 1100 of the 1200px or 550 each max.
Note the .left,.right setting: flex-grow: 0;/* set to 1 to make them take/fill max-width */ Compare the two snippets, this is the only change

.header {
  background-color: blue;
  height: 60px;
  border: solid 1px blue;
  display: flex;
  flex-basis: 1200px;/* how much */
  flex-direction: row; /* across */
}

.inner {
  display: flex;
  flex-direction: row; /* across */
  flex-wrap: nowrap;
  flex-grow: 5;/* relative number */
  flex-shrink: 5;/* relative number */
  /* flex-basis: 1200px;/* how much, sets width if un-comment */
  /*min-width: 1200px;*//* override basis */
  /* max-width: 1200px;*/ /* override basis */
  /*width:100%;*/
  background-color: pink;
  border: solid lime 4px;
}

.left,
.center,
.right {
  display: flex;
  /*flex:1;*/ /*display: inline-block;*/
  flex-direction: column;
  border: 2px solid;
}
.left,
.right {
  flex: 0 1 0px; /* shorthand for next 3 */
  flex-grow: 0;/* set to 1 to make them take/fill max-width */
  flex-shrink: 1;
  flex-basis: 100px;/* effective min width */
  min-width: 0px; /* limits applied overrides basis if greater */
  max-width: 550px; /* limits applied overrides basis */
}

.left {
  background-color: lime;
  border-color: magenta;
}

.center {
  display: flex;
  flex: 0 0 100px; /* shorthand for next 3 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;
  min-width: 100px; /* limits applied overrides basis */
  max-width: 100px; /* limits applied  overrides basis */
  justify-content: left;
  flex-direction: row;
  /* width: 200px; ignored due to flex-basis but messes with border and .inner containment if set */
  background-color: lightblue;
  border-color: blue;
}

.right {
  background-color: orange;
  border-color: cyan;
}

.showcenter {
  text-align: center;
/* min-width: 1200px; /* override width min */
   max-width: 1200px; /* set max */
  width: 100%;/* overridden by min/max */
  border: dashed 2px blue;
}

.centerthing {
  border-right: 1px dotted;
  border-left: 1px dotted;
  width: 100px;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="header">
    <div class="inner">
      <div class="left">lefty</div>
      <div class="center">middle</div>
      <div class="right">righty</div>
    </div>
  </div>
  <div class="showcenter"><span class="centerthing">centered 100px element just to provide a measure</span></div>
</body>

</html>

.header {
  background-color: blue;
  height: 60px;
  border: solid 1px blue;
  display: flex;
  flex-basis: 1200px;/* how much */
  flex-direction: row; /* across */
}

.inner {
  display: flex;
  flex-direction: row; /* across */
  flex-wrap: nowrap;
  flex-grow: 5;/* relative number */
  flex-shrink: 5;/* relative number */
  /* flex-basis: 1200px;/* how much, sets width if un-comment */
  /*min-width: 1200px;*//* override basis */
  /* max-width: 1200px;*/ /* override basis */
  /*width:100%;*/
  background-color: pink;
  border: solid lime 4px;
}

.left,
.center,
.right {
  display: flex;
  /*flex:1;*/ /*display: inline-block;*/
  flex-direction: column;
  border: 2px solid;
}
.left,
.right {
  flex: 0 1 0px; /* shorthand for next 3 */
  flex-grow: 1;/* set to 1 to make them take/fill max-width */
  flex-shrink: 1;
  flex-basis: 100px;/* effective min width */
  min-width: 0px; /* limits applied overrides basis if greater */
  max-width: 550px; /* limits applied overrides basis */
}

.left {
  background-color: lime;
  border-color: magenta;
}

.center {
  display: flex;
  flex: 0 0 100px; /* shorthand for next 3 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;
  min-width: 100px; /* limits applied overrides basis */
  max-width: 100px; /* limits applied  overrides basis */
  justify-content: left;
  flex-direction: row;
  /* width: 200px; ignored due to flex-basis but messes with border and .inner containment if set */
  background-color: lightblue;
  border-color: blue;
}

.right {
  background-color: orange;
  border-color: cyan;
}

.showcenter {
  text-align: center;
/* min-width: 1200px; /* override width min */
   max-width: 1200px; /* set max */
  width: 100%;/* overridden by min/max */
  border: dashed 2px blue;
}

.centerthing {
  border-right: 1px dotted;
  border-left: 1px dotted;
  width: 100px;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="header">
    <div class="inner">
      <div class="left">lefty</div>
      <div class="center">middle</div>
      <div class="right">righty</div>
    </div>
  </div>
  <div class="showcenter"><span class="centerthing">centered 100px element just to provide a measure</span></div>
</body>

</html>

How to align a div center regardless of the divs either side

1 Answers1