@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

回答

相关问题