Center parent div when children have dynamic width

Question

Center parent div when children have dynamic width

Navigation

#1 by (7 votes)

6

I have several div's with the following css:

float:left;
width: 25%;
min-width: 300px;
max-width: 400px;

That is, as I insert a div, it fills in the available space from the left side of the parent div and when there is no space it breaks down.

It happens that when you break down, you have left space on the right side, so I wanted to center all the div's so that the space on the left side is the same as the right side.

I know how to center a div, not the case, because the divs have a dynamic width.
I tried to do a text-align center in the parent div and the children an inline-block diplay, but the last divs were in the middle of the parent div and I want them to be on the left side of the parent div that is centered.

In short, it's centered a parent div when the contents of this div are other divs with dynamic width, within the parent div can not have spaces on the sides.

css

asked by anonymous 21.05.2014 / 20:26

1 answer

Problem in converting number (NumberFormat) Code indentation spacing standardization

score 7 · Accepted Answer

Using flexbox:

HTML:

<div class = "container">
    <div class = "box a">1</div>
    <div class = "box b">2</div>
    <div class = "box c">3</div>
    <div class = "box a">4</div>
    <div class = "box b">5</div>
    <div class = "box c">6</div>
    <div class = "box a">7</div>
    <div class = "box b">8</div>
    <div class = "box c">9</div>
</div>

CSS:

.container {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        width:80%;
        background-color: #ccc;
        margin: 0 auto;
    }

.box {
        min-width:100px;
        max-width:150px;
        min-height:30px;
        flex-grow: 1;
    }

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

The size of the boxes can be changed using min-width and max-width . Only in extreme cases would the right margin appear, but this @media would solve (to eliminate max-width of very narrow screens).

Demo: link

Using JavaScript:

This solution has been simplified to a fixed-width DIV in the boxes, but with some adjustments (and a bit of math: P) it can be adapted to flexible width:

We add a% reference external%, and div to not allow floats to escape from span :

HTML:

<div id="reference">
   <div id="container">
      <div class="box a">1</div>
      <div class="box b">2</div>
      <div class="box c">3</div>
      <div class="box a">4</div>
      <div class="box b">5</div>
      <div class="box c">6</div>
      <div class="box a">7</div>
      <div class="box b">8</div>
      <div class="box c">9</div>
      <span class="clr"></span>
   </div>
</div>

CSS:

#reference, #container, .box {
   padding: 0;
   margin: 0;
}

#reference {
   position:relative;
   background-color: #ffc;
}
#container {
   position: relative;
   background-color: #ccc;
}

.box {
   float: left;
   width:100px;
   min-height:30px;
}

.clr {
   display:block;
   clear:both;
}

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

So far, there's a traditional layout, with a margin left over from the right side. You lose some of the aesthetic you want if for some reason the person is browsing with JS disabled, but usability remains.

In order to give the final finish, centering container , we solve with a small JS function, which should be called in container , onload (or after any layout changes made with JS or some framework ):

JS:

window.onresize = function() {
   b2AdjustPadding();
}

function b2AdjustPadding() {
   var boxSize = 100; // Ponha o mesmo width que estiver no CSS
   var reference = document.getElementById('reference');
   var remaining = reference.offsetWidth % boxSize;
   var padLeft = Math.round(  remaining / 2 );
   var padRight = remaining - padLeft;

   reference.style.paddingLeft = padLeft+"px";
   reference.style.paddingRight= padRight+"px";
}

What we did here was basically this: By changing the width of the page, we calculated how much margin left over, using the module ( onresize ). Then we split this in the middle, rounding up, to add a left padding in our % element. What remains, we put in the right padding, not to be left margin of any side.

Note that the margins are calculated separately, so that rounding problems do not leave a pixel left on the right side, which would happen in certain widths.

Remember to put the same width in the CSS and the reference variable. If you prefer, you can get the size dynamically, but I find it somewhat exaggerated (unless you go to lib for this).

Demo: link