CODEWITHSUNDEEP
css
mpen
mpen

Reputation: 282845

How to center block of inline-blocks?

How do I make the green box (.b) tight around its contents so that I can horizontally center it?

.c {
  background-color: blue;
  margin: 5px;
  height: 100px;
  display: inline-block;
}

.a {
  border: 1px solid red;
}

.b {
  margin: 0 auto;
  border: 1px solid green;
}

body {
  padding: 50px;
}
<div class="a">
  <div class="b">
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

To clarify:

enter image description here

Upvotes: 2

Views: 144

Answers (2)

Temani Afif
Temani Afif

Reputation: 272789

Here is a solution that will not make the .b to be smaller in order to fit all the .c but it will make the .c to be stretched a litte in order to avoid having the white spaces.

UPDATE

I added some media queries to make sure all the elements always stay the same width. Of course this is based on exact values, so for a generic solution we may need to include calc or some variable.

* {
  box-sizing: border-box;
}

.c {
  background-color: blue;
  margin: 5px;
  height: 100px;
  min-width: 80px;
  flex: 1;
  display: inline-block;
}

.a {
  border: 1px solid red;
  display: flex;
}

.b {
  margin: 0 auto;
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.b:after {
  content: "";
  flex: 1;
}

@media all and (max-width:1110px) {
  .b:after {
    margin: 5px;
  }
}

@media all and (min-width:1020px) and (max-width:1110px) {
  .b:after {
    flex: 10;
  }
}

@media all and (min-width:930px) and (max-width:1020px) {
  .b:after {
    flex: 7.75;
  }
}

@media all and (min-width:840px) and (max-width:930px) {
  .b:after {
    flex: 5.5;
  }
}

@media all and (min-width:750px) and (max-width:840px) {
  .b:after {
    flex: 3.25;
  }
}

@media all and (min-width:570px) and (max-width:660px) {
  .b:after {
    flex: 4.33;
  }
}

body {
  padding: 50px;
}
<div class="a">
  <div class="b">
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Upvotes: 1

AuRise
AuRise

Reputation: 2452

As I mentioned in my comment that I wasn't sure if it could be done with CSS alone, I created a quick JS/jQuery solution to calculate the width based on the first row of contents.

function resizeGrid() {
  var rowPos = 0;
  var col = 0;
  $('.b').removeAttr('style');
  $('.c').each(function() {
    var thisRowPos = $(this).offset().top;
    if (thisRowPos != rowPos) {
      if (rowPos != 0) {
        /* Break out of the $.each() loop */
        return false;
      } else {
        col++;
      }
      rowPos = thisRowPos;
    } else {
      col++;
    }
  });
  $('.b').css('width', $('.c').outerWidth(true) * col + 'px');
  console.log('Number of columns: ' + col);
}

$(window).on('resize', resizeGrid);
resizeGrid();
* {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.a {
  border: 1px solid red;
}

.b {
  margin: 0 auto;
  background: lightgreen;
}

.b:after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  clear: both;
}

.c {
  padding: 5px;
  height: 100px;
  display: inline-block;
  float: left;
}

.c table {
  background-color: blue;
  height: 100%;
  width: 100%;
  float: left;
}

.c table td {
  vertical-align: top;
}

body {
  padding: 50px;
}
<div class="a">
  <div class="b">
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions