CSS: ne centre de div avec max-width

J'ai la page suivante de la structure:

<div class="main-container">
    <div class="content">
        <table>

        </table>
    </div>
</div>

Je veux le outher div main-container avoir max-width: 800px; l'intérieur de la div pour être enroulé autour d'une table et d'avoir la même chose avec le tableau. Aussi <div class="content"> doit être centré à l'intérieur de sa div parent - main-container. Ce que je fais mal? jsfiddle

De travail exemple: jsfiddle

OriginalL'auteur Anton Belev | 2013-08-01

  1. 10

    Si vous avez besoin de la .contenu inline-block, il suffit de régler le conteneur text-align: center et le contenu text-align: left. Vous ne serez pas en mesure de centre inline-block éléments à l'aide de margin: auto

    que faire si j'ai un peu de texte à l'intérieur de l' .le contenu que je ne veux pas être centré - je veux juste le centre de l'ensemble de la div, sans affecter le contenu à l'intérieur de ce div
    Définir le contenu du texte aligner à gauche
    jsfiddle.net/4GMNf/13 ok, c'est mieux maintenant

    OriginalL'auteur Adi Ulici

  2. 15

    J'ai eu un problème similaire. Réglage

    margin-left: auto;
margin-right: auto;

    à l'intérieure de la div a fonctionné pour moi.

    ou même sur enregistrer div

    OriginalL'auteur Gideon Rosenthal

  3. 9

    J'ai essayé et cela a fonctionné

    .element-container{
   width:100%;
   max-width: 700px;
   margin: 0px auto;
}
.element{
   width: 80%;
   max-width: 700px;
   height: auto;
   margin-left: 10%;
}

    OriginalL'auteur user3438645

  4. 3

    Vous pouvez simplement changer l'affichage table.
    http://jsfiddle.net/4GMNf/14/

    CSS

    .main-container {
    max-width: 800px;
    margin: auto;
    position: relative;
    background-color: red;
}
.content {
    margin: auto;
    max-width: 600px;
    height: 300px;
    background-color: gray;
    display: table;
}

table 
{
    width: 200px;
}

    OriginalL'auteur thgaskell

  5. 0

    Supprimer display: inline-block; de .content classe CSS

    Démo

    Comme je l'ai dit - à l'intérieur de la div doit être à la même largeur que la table. Je suis en utilisant dispaly: inline-block pour atteindre cet objectif.

    OriginalL'auteur Dhaval Marthak

  6. 0

    essayer cette

    http://jsfiddle.net/4GMNf/10/

    CSS

    .main-container {
    max-width: 800px;
    margin: auto;
    position: relative;
    background-color: red;
}
.content {
    margin: auto;
    max-width: 600px;
    height: 300px;
    background-color: gray;
}
table {
    width: 200px;
}
    L'intérieur de la div de largeur doit dépendre de la largeur du tableau. Je suis en utilisant dispaly: inline-block pour atteindre cet objectif. Votre réponse n'est pas de travail ici.

    OriginalL'auteur Falguni Panchal