html - Using Margin: auto; is not centering div -
margin: auto;
isn't centering <div class="users">
.
.users { margin: auto; } .admin { margin: 5px; border-style: solid; border-width: 1px; border-color: grey; box-shadow: 2px 2px 1px grey; background: white; background: -webkit-linear-gradient(#fff , #f1f1f1); background: -o-linear-gradient(#fff , #f1f1f1); background: -moz-linear-gradient(#fff , #f1f1f1); background: linear-gradient(#fff , #f1f1f1); } .admin img { display: block; border-style: solid; border-width: 1px; border-color: grey; max-width: 100%; margin: auto; margin-top: 20px; margin-bottom: 20px; box-shadow: 2px 2px 1px grey; } .info { position: relative; background-color: #e0e0e0; } .info h1 { padding-top: 10px; } .info h3 { margin-top: 0px; padding-bottom: 10px; } .info h1, h3 { margin-left: 10px; }
<div class="users"> <div class="aboutrow"> <div class="col-md-3 sub admin"> <img class=".image-responsive" src="images/pfpics/nord.jpg"></img> <div class="info"> <h1>user</h2> <h3>info</h3> </div> </div> <div class="col-md-3 sub admin"> <img class=".image-responsive" src="images/pfpics/nord.jpg"></img> <div class="info"> <h1>user</h2> <h3>info</h3> </div> </div> <div class="col-md-3 sub admin"> <img class=".image-responsive" src="images/pfpics/nord.jpg"></img> <div class="info"> <h1>user</h2> <h3>info</h3> </div> </div> </div> <div class="aboutrow"> <div class="col-md-3 sub admin"> <img class=".image-responsive" src="images/pfpics/nord.jpg"></img> <div class="info"> <h1>user</h2> <h3>info</h3> </div> </div> </div> </div>
im using bootstrap make site, don't know if messing or not. tried adding margin percentage left, doesn't play nicely mobile screens.
help appreciated. thank you!
for centering, should have width
, use margin:0 auto;
working sample : https://jsfiddle.net/3xhn73ct/1/
.users { width:50%; margin:0 auto; }
Comments
Post a Comment