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>
See Question&Answers more detail:os