CODEWITHSUNDEEP
htmltwitter-bootstrapcssmargin
Qwerty-Space
Qwerty-Space

Reputation: 142

Using Margin: auto; is not centering div

Margin: auto; isn't centering this <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 to make this site, I don't know if that is messing with it or not. I tried adding a margin percentage to the left, but that doesn't play very nicely with mobile screens.

Help will be very much appreciated. Thank you!

Upvotes: 0

Views: 4817

Answers (9)

nigelheap
nigelheap

Reputation: 56

You will need to set a width on .users and that will center the whole div. 

.users{
  width:500px; /* for example */
  margin:0 auto;
}

If you are trying to just center the contents of .users you will need to do something like this 

.users > div {
   width:500px; /* for example */
   margin: 0 auto;
}

Also since you are using bootstrap you should add a .container class to your wrapping div. That will give you your page margins.

Upvotes: 0

sandeep
sandeep

Reputation: 17

Use following, it will work :

.users

{
text-align:center;

}

Upvotes: 0

TheEarlyMan
TheEarlyMan

Reputation: 402

If you want to use margin: auto; to center a div, you will need to explicitly give a "width" to the div, and most importantly, if you want to see it work, you MUST have the width lesser than the width of your screen.

Upvotes: 0

Qwerty-Space
Qwerty-Space

Reputation: 142

Okay, the way I fixed it is by changing the HTML and CSS

From <div class="col-md-3 sub admin"> to <div class="col-sm-3 admin"> I'm not totally sure if that contributed, but ¯_(ツ)_/¯

Then I changed the CSS to 

.users {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;

}

.admin {
    max-width: 410px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 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);
}

The only problems are that it looks a bit funky on tablet sized screens, and that it's not totally centralised. However, it works for now.

Upvotes: 0

Rani Moreles Rubillos
Rani Moreles Rubillos

Reputation: 1108

For centering, we should have a width and then use margin:0 auto;

Working Sample : https://jsfiddle.net/3xhn73ct/1/

.users {
  width:50%;
  margin:0 auto;
}

Upvotes: 3

c0degeas
c0degeas

Reputation: 832

Add width attribute for the .users CSS selector, for centering the block.

Sample 1 : jsFiddle

.users
{
    width:50%;
    margin:auto;
}

---OR--

One of many other ways to do it, is by giving body attributes of a table of some percentage width and the block within body i.e div.users as a table cell.

Sample 2 : jsFiddle

.users {
    display:table-cell;
    vertical-align: middle;
}

body {
    width:50%;
    display:table;
    margin:auto;
}

Both of these, seem to work fine with mobile screens as well (need to zoom a bit).

Upvotes: 0

Geeky
Geeky

Reputation: 7496

Not sure,if you want something like this

.users {
  display: flex;
  width: 500px;
  justify-content: center;
  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;
}
<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>

Hope this helps

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You need to add "position: relative" to that:

.users {
    margin: 0 auto;
    position: relative;
}

And that only works for horizontal centering.

For vertical centering you need to add

.users {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

And for this to work the parent element of .users needs to have a defined height.

Upvotes: 0

Drown
Drown

Reputation: 5982

A div is a block element by default, and thus has a default width of 100%. Even if you're setting the margin to auto, the element will not be centered because it's already taking all the space available.

You can either explicitely give your element a width, or set its display to inline-block, so that it takes only the space it needs, and set the parent's text-align to center.

Upvotes: 0

Related Questions