Tuiles CSS centrées (largeur réglable)

Question

Je voudrais créer une page contenant un nombre arbitraire de carreaux de taille fixe où le nombre de carreaux de chaque rangée s'ajustera en fonction de la largeur de la fenêtre. J'ai créé cette fonctionnalité here.

Cependant, je veux que ces carreaux soient centrés dans la boîte grise. J'ai essayé de créer l'intermédiaire #tile-box, que je pensais pouvoir centrer et faire varier la largeur pour correspondre aux carreaux à l'intérieur de celui-ci, mais je ne pouvais pas le faire fonctionner du tout.

Des suggestions sur la façon d'obtenir les carreaux centrés dans la division grise?

Answer 1

Eh bien, je ne fais que cela dans votre code

#tile-box { 
    border: 1px solid blue; 
    display: table; 
    text-align:center; //i only added this line to your css 
} 

vous pouvez le faire pour centrer votre texte, il y a plusieurs façons que vous pouvez présenter votre corps dans votre code html, j'espère que je vous ai aidé ...

Answer 2

Centrer horizontale: text-align: center;

Centerign vertical: line-height: 12em;/* Height of the container less the font-size */

Résultat en ligne ici: http://jsfiddle.net/LHDJj/17/

Answer 3

vous étiez la plupart du le chemin, mais vous ne vraiment pas besoin display:table ..

JSfiddle Demo

CSS

#body { 
    width: 50em; 
    max-width: calc(100% - 5em); 
    margin: auto; 
    padding: 2em; 
    margin-bottom: 2em; 
    background-color: #ccc; 
    overflow: auto; 
} 

#tile-box { 
    border: 1px solid blue; 
    text-align: center; 
} 

.tile { 
    width: 5em; 
    height: 5em; 
    background-color: #fff; 
    margin: 1em; 
    padding: 0; 
    display: inline-block; 
    clear: left; 
    vertical-align: top; 
    position: relative; 
    overflow: hidden; 
}