Why Doesn't Margin:Auto Center an Image

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.

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.

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; 

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

Image is not centered even margin auto applied

For margin: 0 auto to work you need to add display: block.

.list_of_reviews {  margin: 80px auto;  font-family: "Times New Roman", Times, Serif;  line-height: 1.5;  font-size: 30px;  width: 40%;  border: solid;}.image_1 {  display: block;  margin: auto;  height: 200px;  width: 350px;  position: relative;}

<div class="list_of_reviews">  <ul style="list-style-type:none">    <li>What will happen to Brittish travelers when Brexit finaly happens</li>  </ul></div><img class="image_1" src="http://placehold.it/350x200" alt="What will happen to Brittish travelers when Brexit finaly happens" />

---

Related Topics