以無邊距的最大寬度居中放置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;

回答

相關問題