セクション内の中心図

Question

これらの数字は中央に配置できません。彼らはセクションの中にいるので、私は非常に多くのバリエーションを試しました。すべてがそうであるべきである、彼らは正しい方法で浮かぶ。しかし、私がセクションや図形コードで何を試しても、それらはセクション内に集中しません。

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

sectionの使用text-align: center;とfigureにfloat: left;を削除し、代わりにdisplay: inline-block; and vertical-align: top;を使用しています。

はトリックを行う必要があり、以下を参照してくださいスニペット：

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>