Elementi di ri-centraggio CSS su involucro

Question

Ho pensato che sarebbe stato semplice ma si sta rivelando un po 'di mal di testa. Sto cercando di ricentrare una griglia di immagini quando l'utente ridimensiona il browser e fa in modo che uno o più di essi si sovrappongano alla riga successiva.

Ho provato a fornire il display della griglia: blocco in linea; ed è genitore un valore di allineamento del testo: centro; ma questo non ricentra gli elementi quando si avvolgono in una nuova riga. Aiuto apprezzato

Per una visualizzazione di ciò che sto cercando di ottenere vista 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

Questa è la soluzione migliore che posso pensare con i CSS solo, la parte magica è le query @media. Ovviamente dovrai fare i conti per adattarsi al tuo caso.

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

Hai provato:

.child-wrapper{margin:0 auto;} 

in modo che rimanga centrato? Di solito funziona.

Answer 3

Aggiungere float:left alla classe .project-thumbnail per i punti di interruzione del browser specifici per le diverse dimensioni di browser/schermo/dispositivo.

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

Aggiungi margin: 0, auto; alla classe successiva.

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

Passando attraverso il codice PHP ho capito che il DIV con il nome della classe .project-thumbnail ottiene ripetuto attraverso WHILE iterazioni del ciclo.

Answer 4

Ho trovato una domanda molto simile con due risposte funzionali. Uno usa JS e l'altro usa elementi segnaposto. Né sono molto carini, ma entrambi sembrano aggirare il problema dell'involucro di spazi bianchi in linea.

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