web-dev-qa-db-fra.com

CSS: Ne divise pas le centre avec la largeur maximale

J'ai la structure de page suivante:

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

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

Je souhaite que le code diviseur main-container ait max-width: 800px; et que la division interne soit enroulée autour d'une table et identique à celle-ci. De plus, <div class="content"> devrait être centré dans son div parent - main-container. Qu'est-ce que je fais mal ici? jsfiddle

Exemple de travail: jsfiddle

csshtmlcenter
12
Anton Belev

Si vous souhaitez que le contenu de .content soit inline-block, définissez simplement le conteneur text-align: center et le contenu text-align: left. Vous ne pourrez pas centrer les éléments inline-block avec margin: auto

10
Adi Ulici

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

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

sur la div intérieure a travaillé pour moi. 

15
Gideon Rosenthal

Je l'ai essayé et ça marche

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

Vous pouvez simplement changer l’affichage en 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;
}
3
thgaskell

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

Demo

0
Dhaval Marthak

essaye ça

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;
}
0
Falguni Panchal