Justify divs left in parent

Question

I have the following requirement.

The green colored parent width will be varying depending on device width. I need all the boxes to be in the center of the parent.

I have tried the following things already, but it didnt help me.

Trial 1
Parent {text-align:center} box {display:inline-block}.

This resulted in following output

Trial 2
Parent {text-align:center} box{float:left}.

This resulted in following output

Trial 3
Parent {display:flex} box -> justify-around & justify-between also didn't work.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Any help on this will be appreciated.

Essentially, this is practically impossible (without JS)...that's just the way wrapping and line-boxes work. — Paulie_D, Dec 14 '15 at 12:27
Use this : [Stackoverflow1](http://stackoverflow.com/questions/8131119/how-do-you-center-align-floating-divs-where-the-parent-container-doesnt-have-a) [Stackoverflow1](http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div) link will help u to resolved you question...... Thanx — Upendrasinh Jadeja, Dec 14 '15 at 12:48

score 4 · Accepted Answer · answered Dec 14 '15 at 12:54

Without Javascript this very hard using floats &/or inline-block.

Flexbox offers some hope but even then some creativity is required.

Essentially, provided the maximum number of elements "per row" is known you can create a required number of invisible elements which can be ustilised in conjunction with justify-content:center to acheieve the last line appearance you require by essentially pushing the last line content back over to the left.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>

Creative solutions! Thanks this helped. – nijin Dec 15 '15 at 06:48 — nijin, Dec 15 '15 at 06:48

Berendschot · Answer 2 · 2015-12-14T13:41:40.117

Got it working by using jQuery and adding a #wrapper.

All you've got to do is calculate how many items will fit on one row. Then you set the wrapper to the exact width that is needed to fit these items.

I hoped it could be done in pure CSS, but as far as I know there is no Math.floor() equivalent for CSS.

Example:

function fitItemsOnRow() {
  var windowWidth = $(window).width();
  var itemWidth = $(".item").outerWidth(true);
  var itemAmount = Math.floor((windowWidth / itemWidth));
  
  if(itemAmount > $(".item").length) {
    /* Set the maximum amount of items */
    itemAmount = $(".item").length;
  }
  
  var rowWidth = itemWidth * itemAmount;
  $("#wrapper").width(rowWidth);
}

$(window).resize(function() {
  /* Responsive */
  fitItemsOnRow();
});

$(document).ready(function() {
  fitItemsOnRow();
});

body {
  margin: 0px;
}
#parent {
  background: #75DB3C;
  min-width: 100vw; 
  min-height: 100vh;
  text-align: center;
}
#wrapper {
  display: inline-block;
  text-align: left;
  font-size: 0px; /* Removes default margin */
}
.item {
  display: inline-block;
  margin: 12px;
  width: 100px;
  height: 100px;
  background: #0B56A9;
}

<div id="parent">
  <div id="wrapper">
    <!-- A wrapper is necessary to center the items -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

score 0 · Answer 3 · answered Dec 14 '15 at 12:56

You can do this with css selector "nth-of-type(n)"

    <div class="parent">
<div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

and css here

.parent
    {
        display: block;
        width: 980px;
        padding: 10px 50px;
        background: green;
        box-sizing: border-box;
    }

        .parent::after
        {
            content: '';
            display: block;
            clear: both;
        }

    .item
    {
        float: left;
        width: 24%;
        margin-right: 1.25%;
        margin-bottom: 1.25%;
        /*
            note
            you may need min height , height or overflow:hidden

            */
    }

        .item:nth-of-type(4n)
        {
            float: right;
            margin-right: 0;
        }

Justify divs left in parent

3 Answers3

Linked