Why are my images not centering using auto left and right margins in inline block display?

Question

using inline block and margin-left auto and margin-right auto the image doesnt center

No need to shout, Explain clearly your issue and add enough code to reproduce your issue. No one will guess what you really have done or not. — G-Cyrillus, Jul 27 '21 at 08:25

score 0 · Answer 1 · answered Jul 27 '21 at 09:34

Image is center and responsive.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<h2 style="text-align:center">This image is center and responsive</h2>


<img src="https://www.w3schools.com/howto/img_paris.jpg" alt="Paris" style="width:50%;">

</body>
</html>

score -1 · Answer 2 · edited Jul 27 '21 at 09:49

-1

.container {
  width: 500px;
  border: 1px solid red;
  padding: 10px;
}

.container__img {
  /* TAKES PART OF THE DIV */
  width: 80%;

  heigh: 100%;
  margin: 0 auto;
}

img {
  width: 100%;
  heigh: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>
<div class="container">
  <div class="container__img">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="image">
  </div>
</div>


</body>
</html>

edited Jul 27 '21 at 09:49

Weyers de Lange

280
2
11

answered Jul 27 '21 at 08:27

B.Ch.

220
1
10

This image is center inside its container, but not responsive therefore it will not be center of your screen. – Weyers de Lange Jul 27 '21 at 09:39

Why are my images not centering using auto left and right margins in inline block display?

2 Answers2