CSS Ponowne centrowanie elementów na opakowaniu

Question

Pomyślałem, że to będzie proste, ale okazuje się, że to trochę bóle głowy. Próbuję uzyskać siatkę obrazów do ponownego wyśrodkowania, gdy użytkownik zmieni rozmiar przeglądarki i spowoduje, że jeden (lub więcej) z nich zawinie do następnej linii.

Próbowałem dać wyświetlanie siatki siatki: inline-block; a jego rodzic ma wartość text-align: center; ale to nie powoduje ponownego wyśrodkowania elementów po zawinięciu do nowej linii. Pomoc doceniona.

Aby uzyskać obraz tego, co próbuję uzyskać, zobacz picture here http://ianclarke.ca/div-reflow.png.

HTML:

<div class="parent-wrapper"> 
    <div class="child-wrapper"> 
     <!-- Worpress loop to load many thumnails --> 
     <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> 
     <div class="project-thumbnail"> 
     <?php the_post_thumbnail('thumbnail'); ?> 
     </div> 
     <?php endwhile; ?> 
    </div> 
</div> 

CSS:

.parent-wrapper 
{ 
width:100%; 
text-align: center; 
} 

.child-wrapper 
{ 
display:inline-block; 
} 

.project-thumbnail{ 
float:left; 
border:2px solid black; 
min-width: 269px; 
max-width: 269px; 
} 

Answer 1

Jest to najlepsze rozwiązanie mogę myśleć tylko z CSS, magia część jest kwerendy @media. Oczywiście będziesz musiał zrobić matematykę, aby dopasować swoją skrzynkę.

JsFiddle Demo

body { 
 
    margin: 0; 
 
} 
 
.parent-wrapper { 
 
    margin: auto; 
 
    width: 500px; 
 
    padding: 5px 0; 
 
    font-size: 0; 
 
} 
 
.child-wrapper { 
 
    display: inline-block; 
 
    width: 100px; 
 
    font-size: 16px; 
 
} 
 
.child-wrapper img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    padding: 5px; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 
} 
 
@media screen and (max-width: 499px) { 
 
    .parent-wrapper { width: 400px; } 
 
} 
 
@media screen and (max-width: 399px) { 
 
    .parent-wrapper { width: 300px; } 
 
} 
 
@media screen and (max-width: 299px) { 
 
    .parent-wrapper { width: 200px; } 
 
} 
 
@media screen and (max-width: 199px) { 
 
    .parent-wrapper { width: 100px; } 
 
}

<div class="parent-wrapper"> 
 
    <div class="child-wrapper"> 
 
     <img src="//dummyimage.com/100" /> 
 
    </div> 
 
    <div class="child-wrapper"> 
 
     <img src="//dummyimage.com/100" /> 
 
    </div> 
 
    <div class="child-wrapper"> 
 
     <img src="//dummyimage.com/100" /> 
 
    </div> 
 
    <div class="child-wrapper"> 
 
     <img src="//dummyimage.com/100" /> 
 
    </div> 
 
    <div class="child-wrapper"> 
 
     <img src="//dummyimage.com/100" /> 
 
    </div> 
 
    <div class="child-wrapper"> 
 
     <img src="//dummyimage.com/100" /> 
 
    </div> 
 
</div>

Answer 2

Czy próbowałeś:

.child-wrapper{margin:0 auto;} 

aby pozostał on wyśrodkowany? Zwykle działa.

Answer 3

Dodaj float:left do klasy .project-thumbnail dla punktów przerwania przeglądarki dla różnych rozmiarów przeglądarki/ekranu/urządzenia.

.project-thumbnail{ 
    float:left; 
    border:2px solid black; 
    min-width: 269px; 
    max-width: 269px; 
} 

Dodaj margin: 0, auto; do następującej klasy.

.child-wrapper 
{ 
    margin: 0, auto; 
} 

Przechodzenie przez kod PHP Mam rozumieć, że DIV z nazwą klasy .project-thumbnail zostanie powtórzony przez WHILE pętli iteracji.

Answer 4

Znalazłem bardzo podobne pytanie z dwiema funkcyjnymi odpowiedziami. Jeden używa JS, a drugi używa elementów zastępczych. Żadne z nich nie są bardzo ładne, ale obydwa wydają się działać w tym miejscu w przypadku problemu z zawijaniem białych bloków.

Shrink-wrap and center a container for inline-block elements