Figure centrale dans la section

Question

Je ne peux pas centrer ces chiffres. Ils sont dans une section, j'ai essayé tellement de variations. Tout est comme il se doit, ils flottent dans le bon sens. Mais peu importe ce que j'essaie avec les sections ou les codes chiffres, ils ne se centrent toujours pas dans les 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

Utilisez text-align: center; sur la section et enlever float: left; sur figure et utiliser display: inline-block; and vertical-align: top; à la place.

devrait faire l'affaire, voir ci-dessous 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>