¿Cómo centrar el bloque de bloques en línea?
¿Cómo hago el cuadro verde (.b) apretado alrededor de su contenido para poder centrarlo horizontalmente?
.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>Para aclarar:
