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

回答

相关问题