边距值不适用于具有float none属性的div

Question

I wanted to center a div. i did so with margin and float property..but the margin values is not working properly

 .body { width: 100%; float: left; } .content { width: 70px; margin: 10px auto 10px auto; float: none; border:1px solid red; } .content p{float:left;margin:0;} 

 <div class="body"> <div class="container"> <div class="content"><p>hello all<p></div> </div> </div> 

here the margin top and bottom values(ie 10px) is not working properly..margin bottom value is commencing from the top which should have from the bottom!

Answer 1

It's best not to center with float as it takes the element out of the normal document flow. Center with margin 'auto' instead.

HTML

 <div class="body">
   <div class="content">hello all</div>
 </div>

CSS

 .body{
  width: 100%;
 }
 .content{
 display:block;
 width: 70px;
 margin: 10px auto;
 }

Answer 2

You can try :

body{
 margin:0px;
}

.container{
   width: 100%;
}
.content{
   display:block;
   width: 70px;
   margin: 10px auto;
}