Inline Block CSS to help layout many figs

by Nivaldo

HTML

<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 1</div>
</div>
<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 2</div>
</div>
<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 3</div>
</div>
<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 4</div>
</div>
<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 5</div>
</div>
<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 6</div>
</div>
<div class="figure">
    <div class="picture"></div>
    <div class="text">Example 7</div>
</div>

CSS

.figure {
    display: inline-block;
}
.picture {
    width: 3rem;
    height: 3rem;
    margin:auto;
    background-color: blue;
}