Центрирование div в ответном div

Question

В принципе у меня есть 3 плавающих элемента, они находятся рядом друг с другом и уменьшаются при изменении размера окна браузера. Теперь под определенной шириной (@media (max-width: 800px)) элементы получают фиксированную ширину и четкость: оба они ниже друг друга и больше не масштабируются.

То, что я пытаюсь сделать сейчас, это центрирование этих трех div внутри их родителя.

margin:0 auto не помогает

Над шириной 800pixel:

Ниже ширины 800pixel:

-> Div должны быть сосредоточены внутри желтому

Код, который у меня есть для медиа-запроса:

@media (max-width: 800px){ 
.data .data_column{width:215px;background-color:red;clear:both; margin: 0 auto;} 
.data{width:90%;background-color:yellow;} 

}

Answer 1

Замена ваш clear:both с float: none должно быть достаточно, чтобы позволить margin: auto сделать работу.

Answer 2

Попробуйте следующее:

<div class="data"> 
    <div class="data-column"></div> 
</div> 

И CSS:

.data { 
    position: relative; 
    width:90%; 
    height: 250px; 
    background-color:yellow; 
} 

.data-column { 
    clear:both; 
    position: absolute; 
    height: 150px; 
    width: 215px; 

    /* horizontal centering */ 
    right: 0; 
    margin-right: auto; 

    left: 0; 
    margin-left: auto; 

    /* vertically centering */   
    top: 0; 
    margin-top: auto; 

    bottom: 0; 
    margin-bottom: auto; 

    background-color: red; 
} 

Вот FIDDLE