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

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -