Why margin:0 auto can't center image in div levelly?

Question

The image element can be centered levelly with margin:0px 50px 0px 50px;.

.wrapper {
  width: 175px;
  height: 100px;
  border: 1px solid red;
}

img {
  margin: 0px 50px 0px 50px;
}

<div class="wrapper">
  <img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?

.wrapper {
  width: 175px;
  height: 100px;
  border: 1px solid red;
}

img {
  margin: 0 auto;
}

<div class="wrapper">
  <img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

It works in the previous case because you have a fixed margin, and you can apply a fixed margin to inline elements. In the second example, you need to add `display: block` - that's needed to center an element with `margin: auto`. — Michael Coker, Jun 27 '17 at 02:13

score 0 · Answer 1 · answered Jun 27 '17 at 02:14

0

You miss display:block

.wrapper {
  width: 175px;
  height: 100px;
  border: 1px solid red;
}

.img1 {
  margin: 0 auto;
  display: block
}

<div class="wrapper">
  <img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

answered Jun 27 '17 at 02:14

Duannx

7,501
1
26
59

I haz kode · Answer 2 · 2017-06-27T03:30:02.180

I'm sure there are better / more efficient ways of doing this. but...

This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.

body {
  text-align: center;
  margin: 0 auto;
}

.my-image-parent {
  margin:1em auto;
  width: 350px;
  max-width:100%;
  height: 200px;
  line-height: 200px; /* should match your div height */
  text-align: center;
  font-size: 0;
  background: #131418;
}


/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */


.my-image {
  width: auto;
  height: 100%;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

<h4>Works for square, landsacape and portrait images.</h4>

<div class="my-image-parent">
  <div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
  <div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
  <div class="my-image bg3"></div>
</div>

athi · Answer 3 · 2018-02-23T06:07:38.260

Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.

.wrapper {
  width: 175px;
  height: 100px;
  border: 1px solid red;
}

img {
  margin: 0 auto;
  display: block;
}

<div class="wrapper">
  <img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

You can also add text-align: center; for the outer wrapper to center the image.

.wrapper {
  width: 175px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}

<div class="wrapper">
  <img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

Edit:

Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.

Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

Why margin:0 auto can't center image in div levelly?

3 Answers3