基本div;容器和包裝

我剛開始製作HTML，我需要一個寬度爲100%的容器和一個980像素和中心對齊的包裝。我剛剛在JSFIDDLE中粘貼了我的代碼。代碼有什麼問題？基本div;容器和包裝

#section-1{ 
    background: #f7f3ed; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1300px; 
    position: relative; 
    padding: 30px 0 100px 0; 
    border: 2px solid red; 
} 
#section-1 h2{ 
    font-size: 32px; 
    font-family: 'Helvetica Neue'; 
    margin-bottom: 20px; 
} 
.wrapper-1{ 
    text-align: center; 
    width: 980px; 
    background: #fff; 
    border: 2px solid blue; 
    position: relative; 
} 

<div id="section-1" class="wrapper-1"> 
     <h2>Hey this is just a test</h2>  
     </div>

JS FIDDLE

來源

2014-02-05 user3067592

你到底在問什麼？你想應用垂直居中嗎？ – ppoliani

*我需要一個100％寬度的容器和一個980px的包裝器*我不明白你想要什麼。 – DaniP

你的＃部分-1不應該有一個max-width:1300px;如果你想100％的寬度，所以刪除。

或不，如果你想這樣。真正重要的是下面的內容。

你.wrapper-1應該有margin:0 auto;

，讓您的.wrapper-1 DIV水平居中。

而且你的HTML應該是

<div id="section-1"> 
    <div class="wrapper-1"> 
     <h2>Hey this is just a test</h2>  
    </div> 
</div>

來源

2014-02-05 13:41:54 Craftein

你只具有你倆分配一個ID，併爲一類一元。你需要一個段和段內的包裝，像這樣：

<div id="section-1"> 
    <div class="wrapper-1"> 
     <h2>Hey this is just a test</h2> 
    </div> 
</div>

出於演示的，我改變了寬度爲包裝的280px，將其更改爲任何你想要的。到中心塊元素水平，你需要給他們一個自動保證金：

.wrapper-1{ 
    text-align: center; 
    width: 280px; 
    background: #fff; 
    border: 2px solid blue; 
    position: relative; 
    margin: 0 auto; 
}

See the working fiddle

來源

2014-02-05 13:42:22 Alex

這是一個非常標準的問題。你想要一個包裝器和一個容器，但是你想用同一個div來做兩個。你需要1個容器的div，1個div的包裝。

這裏是您的解決方案（要小心有「寬度：100％」和邊框）： http://jsfiddle.net/9tzNu/3/

<div id="container"> 
     <div id="wrapper"> 
     <h2>Hey this is just a test</h2>  
    </div> 
</div>

#container{ 
    background: #f7f3ed; 
    max-width: 1300px; 
    margin:0 auto ; 
    padding: 30px 0 100px 0; 
} 

#wrapper{ 
    text-align: center; 
    width: 980px; 
    background: #fff; 
    border: 2px solid blue; 
    margin:0 auto ; 
}

這裏有標準模式，可以幫助你啓動一個項目： http://www.alsacreations.com/static/gabarits/liste.html

來源

2014-02-05 13:48:36

基本div;容器和包裝

回答

相關問題