Auto Margins Don't Center Image in Page

Auto margins don't center image in page

add display:block; and it'll work. Images are inline by default

To clarify, the default width for a block element is auto, which of course fills the entire available width of the containing element.

By setting the margin to auto, the browser assigns half the remaining space to margin-left and the other half to margin-right.

Why doesn't margin:auto center an image?

Because your image is an inline-block element. You could change it to a block-level element like this:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

and it will be centered.

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

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 is margin: 0 auto centering text on image without width specified?

Margin:0 auto works because of the default font-size
I would recommend that you make the hero-text have a width of 100%. While using text-align:center; as that will always center the text.
My Final Code

.hero-text {
    margin:0px;
    width:100%;
    text-align:center
}

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;
}

Can't Center an Image

Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.

Basically, if the img is display: block; you can use margin: 0 auto.

If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.

Here's some code to summarize: http://jsbin.com/upuzav/1/edit

---

Related Topics