Question

如何在容器的左侧和右侧获得均匀的间距（左右5％），使其完全水平居中（并在所有媒体查询中）？

我已经尝试手动执行％，因此它适合但我无法使其正常工作。你有什么想法吗？

我之前做了一个帖子和插图，解释了我想做什么。也许它会有所帮助： http://itu.dk/people/mbul/portfolio/problem_portfolio.jpg

<div class="container">

<ul>
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>  
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>    
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>   
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>   
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>
</ul>    

</div>


ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    padding-left:2%;
    padding-right: 1%;
    }

img {
    width: 23%; 
    float: left; 
    margin-right: 1%;
    margin-bottom: 3em;
    }


@media only screen and (max-width : 1250px) {
/*row of three boxes*/

    img {
    width: 31%; 
    float: left; 
    }
}

@media only screen and (max-width : 1000px) {
/*row of two boxes*/

    img {
    width: 46%; 
    float: left; 
    }
}

@media only screen and (max-width : 670px) {
/*row of one boxes*/

.container {
    width: 100%;
    padding-left:0em;
    padding-right: 0em;
    }    

img {
    width: 100%; 
    float: none; 
    margin-right: 0em;
    margin-bottom: 2em;
    }
}

Answer 1

我相信你应该能够使用保证金：自动。所以你看的是（CSS）：

.container-example {
   width: 50%;
   margin: auto;
}

页面中的div：

<div class="container-example"></div>

应该这样做。在这里查看JSFiddle（http://jsfiddle.net/wwwbv/）！

注意 - 您需要更改响应的唯一方法是媒体示例中的宽度。您可以使用像素宽度或百分比宽度，也可以使用。祝你好运！

在响应式容器的每一侧均匀间隔

1 个答案: