Margin: Auto Is Not Centering

margin: auto is not centering

Define width or margin on your #sponsors ID

as like this

#sponsors{
margin:0 auto; // left margin is auto, right margin is auto , top and bottom margin is 0 set
width:1000px; // define your width according to your design 
}

More about margin auto

CSS margin: 0 auto not centering

It is working.

The problem is you're centering a div, which is a block-level element by default, and which therefore occupies 100% width of its parent (body, in this case). So there's no space to move horizontally, hence no space to center.

For an illustration see this revised demo which has an added border around .container.

.container {
  margin: 0 auto;
  border: 1px solid red;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}

<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>
    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

Using Margin: auto; is not centering div

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.

Why can't I center with margin: 0 auto?

You need to define the width of the element you are centering, not the parent element.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Edit: Ok, I've seen the testpage now, and here is how I think you want it:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

margin-left: auto and margin-right: auto not working on input

In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.

CSS margin auto not centering

Change the display to block if you want to use margin:auto for centering. That does not work with inline elements.

Centering with margin:auto does not work

For center a Element using margin:

1)Define a width for element.

2)Element must be block.

3)Define margin-left and margin-right to auto.

So:

Change:

display: inline-block; 

To:

display:block; 

Div / Text not centering with margin:auto

Your h1 and h3 elements are block level elements by default. This means that they will take up 100% of the width and so margin:auto; has no effect. You could change their display property or set explicit widths, but it would be easier to use text-align: center; and width: 100%; on the container/wrapping element instead.

So for example:

#masterhead #header-text {
    width: 100%;
    text-align: center;
}

#masterhead #header-text{font-family: Arial, Helvetica, sans-serif;}
#masterhead h1{margin-top:0;   font-weight: 600;}
#masterhead h3{padding-top:15px;}

@media only screen and (max-width: 479px) {    #masterhead #header-text { width: 100%; text-align: center;}    #masterhead h1 {font-size:30px; }    #masterhead h3 {font-size:20px; }}

<div id="masterhead">    <div id="header-bg">        <div class="container">            <div id="header-text">                <a href="https://www.google.com">                    <h3>Thin Title</h3>                    <h1>Title</h1>                </a>            </div>            <div class="logo">                <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a>            </div>                      </div>    </div></div>

---

Related Topics