div div div centering CSS

我正在嘗試以div爲中心，div等於margin。如果可能，該框應位於頁面的中心。到目前爲止，我已經得到了下面的代碼：div div div centering CSS

* { 
    margin: 0px; 
    padding: 0px; 
} 



body { 

    background-color: #3D3D3D; 
    padding: 30px; 

} 


#box{ 
    background-color: gray; 
    border: solid black 4px; 

} 


#header { 
    height:60px; 
    width: 800px; 
    margin: auto; 
    border: solid black 2px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    text-align: center; 
    line-height: 60px; 

background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white)); 
background: -webkit-linear-gradient(left, #52524E, #AAAAA4); 
background: -moz-linear-gradient(left, #52524E, #AAAAA4); 
background: -o-linear-gradient(left, #52524E, #AAAAA4); 
background: linear-gradient(left,#52524E, #AAAAA4); 
} 

#header a { 
    font-size: 22px; 
    color: black; 
    margin: 30px; 
    text-decoration: none; 
} 


img#code { 
    display: block; 
    margin: auto; 
    margin-bottom: 10px; 
    margin-top: 30px; 
    width: 500px; 
} 

#container{ 
    width: 800px; 
    border: solid white 2px; 
    margin: auto; 
    margin-bottom: 30px; 
} 

.splitter { 
    width: 500px; 
    height: 5px; 
    background-color:black; 
    margin: auto; 
    margin-bottom: 10px; 
    border-radius: 35px; 
} 


#text1{ 
    background-color: #999999; 
    margin: auto; 
    margin-bottom: 30px; 
    width: 500px; 
    text-align: left; 
    border-radius: 5px; 
} 

.inside{ 
    margin: 30px; 
} 

#text1 h3{ 
    border-bottom: solid black 1px; 
} 

.border{ 
    width: 200px; 
    margin-top: 20px; 
    margin: auto; 
    text-align: center; 
} 


#box2{ 
    width: 500px; 
    height: 100px; 
    background-color: blue; 
    margin: 70px auto ; 
    position: relative; 

} 

.midbox{ 
    width: 100px; 
    height: 50px; 
    background-color: red; 
    margin: 30px auto; 
    position: absolute; 

} 






and html 




<html> 
    <head> 
    </head> 

    <body> 

    <div id="box"> 
    <div id="header"> 
     <a href="">About Me</a> 
     <a href="">Hobbies</a> 
     <a href="">Pictures</a> 
     <a href="">Contact Me</a>  
    </div> 


     <div id="container"> 

<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/> 

     <div class="splitter"></div> 

     <div id="text1"> 
      <div class="border"> 
       <h3> Coding in clouds</h3> 
      </div /* border */> 
       <br> 
      <div class="inside"> 
       <p> From coding, to Scripting. We all share 
       the same fate. We look, obsereve, figure out, 
       and analyze everything around us. We have an 
       eye to solve things, put things together, Fix 
       things, and show our pride when the work is done; 
       yet many of its roots gets unoticed. 
       <br> <br> To other souls, 
       we are just a body stuck in this world, but we, in fact 
       are the ones that assebles technology, make things whole, 
       and make everyone become one in this crazy thing 
       called the Web. We are Software developers. We code, 
       we fix, and we make it possible. 
      </div inside> 


     </div /*text1*/> 

      <div id="box2"> 
        <div class="midbox"> 
        hello 
        </div> 
      </div> 

     </div /* container */> 

    </div /* box */> 





    </body> 

</html>

來源

2013-12-24 user3466255

爲此，你需要什麼？ http://jsfiddle.net/danield770/NgVcD/ – Danield

可能的重複[水平居中div在div中]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a- div）和其他許多人，其中包括昨天的同一個問題。 – Rob

試試這個：

CSS

#testbox{ 
    border: 3px solid red; 
    width: 200px; 
    height: 200px; 
    margin:0 auto; 
    margin-top:40px; 
    position:relative; 
} 

.testbox2{ 
    border: 3px solid blue; 
    width:100px; 
    height:100px; 
    position:absolute; 
    margin:auto; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}

HTML

<div id="testbox"> 
    <div class="testbox2"> 
    </div> 
</div>

來源

2013-12-24 02:46:07

我添加了我的完整CSS和HTML，但它仍然給我一個困難時間 – user3466255

您的HTML標記充斥着錯誤，雖然。 [這裏是小提琴]（http://jsfiddle.net/6Mpmb/）剝離了一切。糾正你的錯誤，並實施這一點，你會很好。 –

像這樣的事情吧？

http://jsfiddle.net/tezf8/1/

您對每個框中有兩個空白的值，因此，「保證金：汽車;」超過了「保證金：30px」;在.testbox2

這裏是CSS：

#testbox{ 
    border: 3px solid red; 
    width: 200px; 
    height: 200px; 
    margin: 50px auto 0; 
} 

.testbox2{ 
    border: 3px solid blue; 
    width:100px; 
    height:100px; 
    margin: 48px auto; 
}

來源

2013-12-24 02:51:59 Travis

內框的整體寬度爲106px。上邊距需要佔用3px邊框，因此，「邊距：48px自動」可以做到這一點。否則你的技術很好。 –

好電話@MarcAudet。我已經更新了我的答案以適應邊界 – Travis

div div div centering CSS

回答

相關問題