Aligné à gauche de la dernière ligne est centré grille d'éléments

J'ai un tas de blocs de taille définie à display:inline-block à l'intérieur d'un div qui a text-align:center ensemble pour aligner les blocs.

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

Les blocs de remplissage de la div horizontalement, et que la fenêtre du navigateur se rétrécit, certains blocs de saut de lignes nouvelles, la création de plus de lignes et de moins de colonnes. Je veux que tout à toujours rester centré, avec la dernière ligne alignée à gauche, comme ceci :

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

Ce qui se passe actuellement est: est-ce

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

Je ne peux pas ajouter de remplissage divs comme une suggestion, car il pourrait y avoir un nombre quelconque de blocs, et le nombre de lignes et de colonnes varieront en fonction de la largeur du navigateur. Je ne peux pas le style de bloc #7 directement, pour la même raison. Les blocs doit toujours rester centré peu importe le nombre de colonnes.

Voici un stylo pour mieux démontrer:

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

Est-ce possible? Je me sens comme il devrait l'être. Je préfère ne pas utiliser flexbox, car c'est uniquement ie10+, et j'aimerais ie9+. J'aimerais vraiment un pur CSS solution, mais si vous me dites que le JS est la seule façon, je serais ravi de voir que dans l'action.

De référence sur des questions similaires, mais aucun n'a été bien expliqué:

Comment aligner à gauche de la dernière ligne/ligne en ligne multiples flexbox

CSS - aligné à Gauche de la dernière ligne d'images dans un div centré

Corrigé de centrage de la dernière ligne d'éléments dans le liquide contenant la grille pour être aligné à gauche, tandis que le conteneur reste centré

Centre de plusieurs inline blocs avec CSS et aligner la dernière ligne à gauche

  • Ne pas retirer la text-align: center; faire ce que vous voulez? codepen.io/anon/pen/yfjlq
  • si la largeur de l'écran est plus petit que le conteneur max-width, puis vous verrez le problème.
  • Je ne vois pas de problème avec la solution ci-dessus, pourriez-vous expliquer davantage pourquoi ce n'est pas suffisant?
  • mettre une couleur de fond sur le conteneur, vous verrez alors comment il n'est pas parfaitement centrée.
  • Je peut deviner que ce n'est pas possible. Ou peut-être vous auriez besoin de beaucoup de requêtes de média à exactement spécifier la largeur du conteneur pour chaque taille d'écran.
  • Il n'y a pas un pur CSS solution à cette question. Flexbox est pas un système de grille. Ce qu'il propose n'est pas très différent de celui text-align quand il s'agit de l'alignement.
  • Moseley, la dernière ligne est toujours centré et je veux qu'il aligné sur la colonne de gauche. Le truc, c'est que les colonnes doivent également être centrée dans le conteneur, quel que soit le nombre de colonnes. andi, je pense que vous avez raison. Soupir, les requêtes de média c'est pour maintenant.
  • J'ai mis en place une solution plus simple qui devrait convenir à vos besoins, veuillez jeter un oeil à mon montage.
  • J'ai mis en place une solution plus simple qui devrait convenir à vos besoins, veuillez jeter un oeil à mon montage. Vous pouvez également jeter un oeil à ces 2 réponses pour les grilles de clôture de stackoverflow.com/a/23817032/1811992 et stackoverflow.com/a/20457076/1811992
  • Juste à travers une autre idée dans le mélange, si vous avez utilisé un pseudo-élément pour remplir le reste de la largeur de la dernière rangée?
  • Aussi, il pourrait être une bonne façon avec text-align justifier + un pseudo-élément.
  • idée intéressante, aimerait voir à l'usage!
  • J'ai joué avec pendant un certain temps, et je découvre pourquoi les éléments en ligne sont tellement difficiles. Ils sont essentiellement de texte (donc les espaces dans votre code html pouvez obtenir bizarre). Une fois ils ont frappé à la fin de la largeur de la ils sont, il n'y a pas d'emballage. Vous n'avez aucune idée du moment où la ligne se termine, c'est pourquoi nous ne pouvons pas faire la ponctuation hors justification facilement. C'est une question difficile : )
  • C'est drôle comment j'ai trouvé ma réponse à votre problème.

InformationsquelleAutor Ivan Durst | 2013-10-22