Question

我试图将一个div放在一个具有相等边距的div中。如果可能，该框应位于页面的中心。到目前为止，我有以下代码：

* {
  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>

Answer 1

或许这样的事情？

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;
}

Answer 2

试试这个：

<强> 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>

在以CSS为中心的div中划分

2 个答案: