如何将内联块居中放置? [英] How to center block of inline-blocks?

问题描述

如何使绿色框(.b)紧紧围绕其内容，以便水平居中?

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>

要澄清:

推荐答案

这里是一种解决方案，它不会使.b变小以适合所有.c，但会使.c拉伸为了避免出现空白，请使用小纸屑.

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.

更新

我添加了一些媒体查询，以确保所有元素始终保持相同的宽度.当然，这是基于精确值，因此对于通用解决方案，我们可能需要包含calc或某些变量.

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>

这篇关于如何将内联块居中放置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！