以无边距的最大宽度居中放置div：auto;

那是我的笔：http://codepen.io/helloworld/pen/oxgqpJ 以无边距的最大宽度居中放置div：auto;

我想中心一个div固定的最大宽度，但是当我固定的最大宽度下，我想10％的每一侧的边缘，因为此刻没有该解决方案领域的可见边际。

的缺点是会占用每边有10％的保证金股利不居中了它开始在左侧......

我怎样才能解决呢？

<div id="container"> 
    Center me with a fixed max width, but when I am under the fixed max width I want a margin of 10% on each side , because at the moment there is no visible margin. 
</div> 



#container 
{ 
    margin: 0 auto; 

    // use instead in smaller resolutions 
    //margin: 0 10%; 
    max-width:1024px; 
    background:orange; 
}

来源

2016-03-01 Elisabeth

你想水平或垂直居中。你的预期产出是多少？ – ketan

因此水平居中margin：0 auto; – Elisabeth

http://codepen.io/anon/pen/wGBmNz这个？ –

我不太确定我完全理解你的问题，但也许这样做。
我只是使用边距来确保它居中，然后用填充确保两边都是10％。
显然这意味着它只满足您对div（文本）的实际内容而不是div的本身的要求，也许这足够好？

#container 
{ 
    max-width:1024px; 
    margin: auto; 
    padding-left: 10%; 
    padding-right: 10%; 
    background:orange; 
}

来源

2016-03-01 11:56:38

你是一个与最好的工作解决方案。我只是把我的真实生活中心的div（不codepen假的样品）的div给它一个填充è瞧！谢谢！ – Elisabeth

没问题 - 很高兴我能帮忙:) –

您可以使用此，例如：

@media (max-width: 1024px) { 
    #container { margin: 0 10%; } 
}

看到http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

来源

2016-03-01 11:34:09 Walid

你必须依靠媒体查询申请不同的保证金为在各种条件相同的对象。除了你创建的类，应用这个

@media only screen and (max-width: 1024px) { 
/* For mobile phones: */ 
    #container { 
    margin:0 10%; 
    } 
}

在其他更高的屏幕上，其他css属性将被应用！了解如何使用媒体查询：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

来源

2016-03-01 11:43:10

以无边距的最大宽度居中放置div：auto;

回答

相关问题