@media與中心div

製作一個我希望可以擴展移動設備的網站。儘管我嘗試了很多東西，但我無法弄清楚如何做這項工作。@media與中心div

這裏是我的代碼：

<div class="vertical-white"> 


<div class="content-container"> 

    <div class="horizontal-3"> 
     <div class="kamer-foto"> 
     1 
     </div> 

     <div class="kamer-text"> 
     <a href="#" class="button-room">Lees meer</a> 
     </div> 
    </div> 

    <div class="horizontal-3"> 
     <div class="kamer-foto"> 
     2 
     </div> 

     <div class="kamer-text"> 
     <a href="#" class="button-room">Lees meer</a> 
     </div> 
    </div> 

    <div class="horizontal-3"> 
     <div class="kamer-foto"> 
     3 
     </div> 

     <div class="kamer-text"> 
     <a href="#" class="button-room">Lees meer</a> 
     </div> 
    </div> 

    </div> 
</div>

然後在這裏是我的CSS：

.vertical-white { 
    display: block; 
    width: 100%; 
    min-height: 400px; 
    background-color: white; 
} 

.content-container { 
    overflow: auto; 
    width: 66%; 
    max-width: 980px; 
    min-width: 720px; 
    min-height: 400px; 
    background-color: rgba(0, 28, 44, 0.5); 
    margin: 0 auto; 
} 

.horizontal-3 { 
    display: block; 
    float: left; 
    width: 28%; 
    min-width: 200px; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    height: 400px; 
    background-color: rgba(5, 100, 20, 0.3); 
    margin-left: 4%; 
} 

@media screen and (max-width: 720px) { 
    .horizontal-3 { 
    width: 250px; 
    float: none; 
    margin-left: 0 auto; 
    margin-right: 0 auto; 
    } 
    .content-container { 
    min-width: 300px; 
    } 
}

股利水平3時，屏幕比720像素情況下，不居中。浮動沒有，邊距被設置爲零，顯示也是阻止的。爲什麼它不集中？

來源

2017-03-01 Athylus

你可以把它變成一個可運行的代碼片段，因此我們可以更容易地測試嗎？ –

最重要的是，它不是margin-left: 0 auto和margin-right: 0 auto，但要麼只是margin: 0 auto或margin-left: auto和margin-right: auto，即無論是對單個參數或組合值的簡寫參數一個值。（在這裏看到：http://codepen.io/anon/pen/qrbNZZ）

來源

2017-03-01 14:38:02 Johannes

只是要

.horizontal-3{ 
    margin: auto; 
}

當你寫margin-right它只是意味着你是給從權利，這應該是一個單一的數值區間，但你給有 vaues 0 auto 。所以只要給margin: auto，一切都會正常工作。

來源

2017-03-01 14:49:05 Siraj

@media與中心div

回答

相關問題