css - CSS: max-width で div を中央揃えにしない

Question

次のページ構造があります。

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

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

外側の divmain-containerを持ちmax-width: 800px;、内側の div をテーブルに巻き付けて、テーブルと同じにする必要があります。また<div class="content">、親の div - の中央に配置する必要がありますmain-container。ここで何が間違っていますか？jsfiddle

作業例: jsfiddle

Answer 1

inline-block.contentにする必要がある場合は、 containerと content を設定するだけです。を使用してインラインブロック要素を中央に配置することはできません。text-align: centertext-align: leftmargin: auto

Answer 2

私はこれを試してみましたが、うまくいきました

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

Answer 3

表示を に変更するだけ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;
}

Answer 4

これを試して

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;
}