CSS Centre affichage bloc inline ?

Question

J'ai un code qui fonctionne ici: http://jsfiddle.net/WVm5d/ (vous pourriez avoir besoin pour rendre le résultat fenêtre plus grande pour voir l'aligner au centre d'effet)

Question

Le code fonctionne mais je n'aime pas avoir display: table;. C'est la seule façon que j'ai pu faire la synthèse de la classe aligner au centre. Je pense que ce serait mieux si il y avait un moyen d'utiliser display: block; ou display: inline-block;. Est-il possible de résoudre l'aligner au centre d'une autre façon?

L'ajout d'un fixe avec le conteneur n'est pas une option pour moi.

Je vais aussi coller mon code ici si le JS Fiddle lien est cassé dans l'avenir:

HTML

    <div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

CSS

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

Answer 1

Essayez ceci. J’ai ajouté corps et pour envelopper, puis supprimé votre``

Answer 2

Si vous avez un avec , puis n’importe quel texte à l’intérieur il sera centré par rapport à la largeur de cet élément conteneur. `` éléments sont traités sous forme de texte à cet effet, donc ils vont aussi être centrés.

Answer 3

Vous n’avez pas besoin d’utiliser « afficher : table ». La raison pour laquelle votre marge : 0 tentative de centrage automatique ne fonctionne pas est parce que vous ne spécifiez une largeur.

Cela fonctionne très bien :

Vous n’avez pas besoin de spécifier l’affichage : bloquer puisque cette div sera bloc par défaut. Vous pouvez aussi probablement perdre l’overflow : hidden.

Answer 4

Je viens de changer 2 paramètres :

Démonstration en direct

Answer 5

Excellent article, que j’ai trouvé ce qui fonctionne le mieux pour moi était d’ajouter un % à la taille