Bildmitte im Bereich

Question

Ich kann diese Zahlen nicht zentriert bekommen. Sie sind in einem Abschnitt, ich habe so viele Variationen ausprobiert. Alles ist so wie es sein sollte, sie schwimmen auf die richtige Art und Weise. Aber egal, was ich mit den Abschnitten oder Zahlencodes versuche, sie zentrieren sich immer noch nicht innerhalb der Abschnitte.

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

Verwenden text-align: center; auf dem section und entfernen float: left; auf figure und display: inline-block; and vertical-align: top; stattdessen verwenden.

sollte es tun, siehe unten 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>