在响应div中居中对齐

基本上我有3个浮动元素，它们彼此相邻并在调整浏览器窗口大小时缩小比例。现在在一定的宽度下（@media（max-width：800px）），元素得到一个固定的宽度和一个明确的：两者都低于eachother并且不再缩放。在响应div中居中对齐

我现在想要做的是将这3个div放在父母的中心。

margin:0 auto是没有帮助

以上要回应登广告宽度： Imgur

下面要回应登广告宽度：

Imgur

- >应股利黄色一个

内居中代码我有媒体查询：

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

}

来源

2014-10-01 vlovystack

东西在你的代码别的是影响它，[示例]（HTTP：//的jsfiddle。净/ BrianDillingham/xn0mnmrL /）。提供标记和更多的CSS？ – 2014-10-01 22:49:30

最好提供一个JSFiddle（http://jsfiddle.net/），所以我们可以看到发生了什么:) – 2014-10-01 23:00:36

更换您的clear:both与float: none应该足以让margin: auto做的工作。

来源

2014-10-01 22:54:10

一旦我添加float：none，我的宽度变为100％而不是215px在css中 – vlovystack 2014-10-01 22:57:50

提供标记up和css – 2014-10-01 22:59:43

我解决了这个问题！我仍然有显示：inline istead of display：block，thanks @antoine！ – vlovystack 2014-10-01 23:00:14

尝试以下操作：

<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

来源

2014-10-01 22:58:29 algorhythm

在响应div中居中对齐

回答

相关问题