在響應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中居中對齊

回答

相關問題