div內的中心div

Question

我在另一個div內的div內有兩個表：

HTML

<div class="container center">
    <div class="thing">
        <table class="tabel center" style="width:230px">
            <tr><td>Example</td></tr>
        </table>
    </div>

    <div class="thing">
        <table class="tabel center" style="width:230px">
            <tr><td>Example</td></tr>
        </table>
    </div>
</div>

CSS

.container {
    width: 100%;
    overflow: hidden;
    float: left;
    border: 1px solid red;
    text-align: center;
}
.tabel {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
}
.thing {
    width: 50%;
    float: left;
    min-width: 230px;
}

.center {
   margin: 0 auto;
}

兩個單元格正確居中

[圖片被主機刪除]

但是，當屏幕的寬度變得太小時，單元格彼此之間位於下方（我想要的），但是它們不再居中：

[圖片被主機刪除]

所以我希望他們看起來像：

[圖片被主機刪除]

Answer 1

您必須刪除float: left; ，設置display: inline-block; 並消除它們之間的空白。

.thing {
    width: 50%;
    display: inline-block;
    /* float: left; */
    min-width: 230px;
    vertical-align: top;
}

小提琴： http ： //jsfiddle.net/3g7xk0sj/1/

Answer 2

只需使用媒體查詢http://jsfiddle.net/3g7xk0sj/3/

@media all and (max-width: 480px) {
    .thing {
        width: 100%;
    }
}

Answer 3

您面臨的問題是，您要告訴每個浮動DIV （類thing ）50％的寬度，最小為230px，但它永遠不會跨越容器寬度的100％（除非容器的寬度也為230px）。 因此，自動邊距將僅應用於class .thing的寬度（230像素）內。 現在，將您的桌子也增加230像素寬，再也不會顯示任何邊距，因此您的桌子將永遠不會漂浮在中間。

嘗試使用CSS媒體查詢，而不是強制的一類100％的寬度thing當屏幕尺寸低於460像素（230px * 2）。

或者，按照伊曼紐爾的建議，使用display: inline-block而不是float。

Answer 4

在thing類中刪除float:left並使用margin:0 auto

Answer 5

演示http://jsfiddle.net/3g7xk0sj/4/

.container {
    width: 100%;
    overflow: hidden;
    float: left;
    border: 1px solid red;
    text-align: center;
}
.tabel {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
}
.thing {
    margin: 0 auto;
    width: 50%;
}



<div class="container center">
    <div class="thing">
        <table class="tabel center" style="width:100%">
            <tr><td>Example</td></tr>
        </table>
    </div>

    <div class="thing">
        <table class="tabel center" style="width:100%">
            <tr><td>Example</td></tr>
        </table>
    </div>
</div>