Griglia del fluido centrale degli elementi senza impostare la larghezza sul genitore

Question

Vorrei centrare una "griglia" di elementi che, una volta ridimensionati, si adattano al centro stesso.

Ti piace questa:

___________________ 
|     | 
| [] [] [] [] | 
| [] [] [] [] | 
| [] [] []  | 
------------------- 
________________ 
|    | 
| [] [] [] | 
| [] [] [] | 
| [] [] [] | 
| [] []  | 
---------------- 
_____________ 
|    | 
| [] [] | 
| [] [] | 
| [] [] | 
| [] [] | 
| [] [] | 
| []  | 
------------- 

Ho provato a installare un max-width, ma che porta a questo problema quando ridimensionata:

________________ 
|    | 
| [] [] [] | 
| [] [] [] | 
| [] [] [] | 
| [] []  | 
---------------- 
_____________ 
|    | 
| [] []  | 
| [] []  | 
| [] []  | 
| [] []  | 
| [] []  | 
| []   | 
------------- 

Non considero usando media query e l'impostazione difficile widths (o anche max-widths) per ogni configurazione una soluzione reale.

Sono aperto a CSS3 fino a quando si degrada con garbo, e vorrei evitare javascript.

Modifica: L'aggiunta di elementi non semantici è anche un interruttore, un contenitore div o qualcosa sarebbe passabile ma non ideale.

Il markup dovrebbe essere la seguente:

<ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
</ul> 

Ecco un demo per iniziare.

Grazie.

Answer 1

È ancora un po 'vago su quali siano esattamente le vostre esigenze di centratura (come in tutte le vostre illustrazioni sopra mostrano un numero pari di elementi, quindi non so cosa vi aspettate per numero dispari. ho appena aggiunto un text-align: center al ul e raggiunto un effetto di centraggio (http://jsfiddle.net/nR9Mk/1/), ma non so se si comporta come volete

Aggiornamento:. Se sei solo a che fare con i numeri pari e si desidera per rimanere raggruppati per due, quindi funzionerebbe: http://jsfiddle.net/nR9Mk/8/.

ROUND 2: in base ai requisiti del "numero dispari" rivelato, ho trovato una soluzione che funziona. Nota: 1) richiede un extra di markup HTML, 2) devi impostare qualche tipo di limite pratico su quanto vuoi arrivare e ottenere comunque l'effetto. Here è il codice con gli elementi "buffer" rilevati da un outline e here con il contorno rimosso.

ROUND 3: So che hai già accettato la mia risposta, ma stavo già lavorando su questo, quindi ho pensato di offrirlo comunque. Sulla base del tuo commento sull'interruttore, here is a modified plan potrebbe essere utile per te (o qualcun altro). È un ibrido - "a volte" spinge gli elementi a sinistra (di solito quando sarebbe più difficile non farlo) e qualche volta li lascia stare "off column" ma centrati. Per impedirgli di sembrare semplice "strano", viene dato un max-width di sei colonne di larghezza.