Tengo un montón de bloques del mismo tamaño establecidos paradisplay:inline-block dentro de un div que tienetext-align:center configurar para alinear los bloques.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

Los bloques llenan el div horizontalmente y, a medida que la ventana del navegador se reduce, algunos bloques se dividen en nuevas líneas, creando más filas y menos columnas. Quiero que todo permanezca centrado, con la última fila alineada a la izquierda, como esto:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

Lo que actualmente sucede es esto:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

No puedo agregar divs de relleno adicionales como una sugerencia, porque podría haber cualquier número de bloques, y la cantidad de filas y columnas variará según el ancho del navegador. Tampoco puedo estilizar el bloque # 7 directamente, por la misma razón. Los bloquessiempre debe permanecer centrado No importa cuántas columnas.

Aquí hay una pluma para demostrar mejor:

http://codepen.io/anon/pen/IDsxn

es posible? Siento que seguro debería ser. Preferiría no usar flexbox ya que es solo ie10 +, y me gustaría ie9 +. Realmente me gustaría una solución CSS pura, pero si me dices que JS es la única manera, me encantaría ver eso en acción.

Para referencia - preguntas similares, aunque ninguna fue explicada a fondo:

Cómo alinear la última fila / línea izquierda en flexbox de múltiples líneas

CSS: alinear a la izquierda la última fila de imágenes en un div centrado

Fije el centrado de la última línea de elementos en la rejilla del contenedor de fluido para que quede alineado mientras el contenedor permanece centrado

Centre varios bloques en línea con CSS y alinee la última fila a la izquierda