центр дивы внутри DIV

Question

У меня есть две таблицы внутри дивы внутри другой 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; 
} 

Две клетки сосредоточены правильно

[Изображение удален хозяином]

но когда ширина экрана становится слишком мал, клетки идут underneith друг друга (что я хочу), но они больше не получают по центру:

[удалено Изображение от хоста]

Так что я хочу, чтобы они выглядели как:

[Изображение удален хозяином]

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

Удалить float:left & использование margin:0 auto в классе вещь

Answer 3

Просто используйте медиа-запрос http://jsfiddle.net/3g7xk0sj/3/

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

Answer 4

Демонстрационные 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> 

Answer 5

Проблема вы столкнулись в том, что вы говорите каждый плавающий DIV (класс thing) составляет 50% ширины не менее 230 пикселей, но она никогда не будет охватывать 100% ширины контейнера (если контейнер не имеет ширину 230 пикселей). Таким образом, автоматическая маржа будет применяться только в пределах класса .thing, ширина которой составляет 230 пикселей. Теперь добавьте к тому, что ваш стол, который ТАКОЕ 230 пикселей в ширину, никакой маржи не будет отображаться, и, следовательно, ваши таблицы никогда не будут плавать в центре.

Попробуйте использовать медиа-запрос CSS, чтобы увеличить ширину 100% по классу thing, когда размер экрана опускается ниже 460 пикселей (230 пикселей * 2).

В качестве альтернативы используйте display: inline-block вместо плавающего, как предложил emmanuel.