I want to put a div in center (horizontally). At the same time, I want to put that div margin-top:40px and margin-bottom:20px. But once I assigned margin:0 auto, margin-top and bottom does not work.
#circle_price {
background-color: red;
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
margin-top: 40px;
margin-bottom: 20px;
margin: 0 auto;
}
Anyone has an idea about this? Thanks.
margin: 0 auto which is equal to margin: 0 auto 0 auto will override your earlier set properties i.e. margin-top and margin-bottom is reset to 0.
You need to use margin: 40px auto 20px auto which is short hand for margin-top margin-right margin-bottom and margin-left in clockwise order.
.center-me {
margin: 40px auto 20px auto;
width: 300px;
background: lightblue;
}<div class="center-me">Centered block</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments