Center figure in section - html

Question

I cant get these figures to centered. They're inside a section, I've tried so many variations. All is as it should be, they float in the right way. But no matter what I try with the sections or figure codes, they still do not center within the sections.
section {
width: 100%;
padding: 1rem;
display: table;
margin: 0 auto;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: white;
}
figure.snip1165 {
float: left;
margin: 1rem;
overflow: hidden;
min-width: 150px;
max-width: 300px;
background: #000000;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
<section>
<figure class="snip1165">
<img src="http://test.nationalparkpaws.com/images/camping%20in%20mountains%20with%20ten.jpg" />
<figcaption>
<h3>Useful Tips</h3>
<p>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</p>
</figcaption>
</figure>
<figure class="snip1165 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample63.jpg" alt="sample63" />
<figcaption>
<h3>Caspian<span> Bellevedere</span></h3>
<p>
I don't need to compromise on my principles, because they don't have the slightest bearing on what happens to me anyway.
</p>
</figcaption>
</figure>
<figure class="snip1165 orange">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample64.jpg" alt="sample64" />
<figcaption>
<h3>Parsley<span> Montana</span></h3>
<p>
That's the problem with nature, something's always stinging you or oozing mucous all over you. Hobbes, I think it is time you and me when and watched some TV.
</p>
</figcaption>
</figure>
</section>

Answer 1

Use text-align: center; on the section and remove float: left; on figure and use display: inline-block; and vertical-align: top; instead.
Should do the trick, see below snippet :
section {
width: 100%;
padding: 1rem;
display: table;
margin: 0 auto;
max-width: none;
background-color: #373B44;
height: 100vh;
text-align: center;
}
section:nth-of-type(2n) {
background-color: white;
}
figure.snip1165 {
display: inline-block;
vertical-align: top;
margin: 1rem;
overflow: hidden;
min-width: 150px;
max-width: 300px;
background: #000000;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
<section>
<figure class="snip1165">
<img src="http://test.nationalparkpaws.com/images/camping%20in%20mountains%20with%20ten.jpg"/>
<figcaption>
<h3>Useful Tips</h3>
<p>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</p>
</figcaption>
</figure>
<figure class="snip1165 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample63.jpg" alt="sample63"/>
<figcaption>
<h3>Caspian<span> Bellevedere</span></h3>
<p>
I don't need to compromise on my principles, because they don't have the slightest bearing on what happens to me anyway.
</p>
</figcaption>
</figure>
<figure class="snip1165 orange">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample64.jpg" alt="sample64"/>
<figcaption>
<h3>Parsley<span> Montana</span></h3>
<p>
That's the problem with nature, something's always stinging you or oozing mucous all over you. Hobbes, I think it is time you and me when and watched some TV.
</p>
</figcaption>
</figure>
</section>