为什么我的图像不能在内联块显示中使用自动左右边距居中？ [复制]答案

【问题标题】：Why are my images not centering using auto left and right margins in inline block display? [duplicate]为什么我的图像不能在内联块显示中使用自动左右边距居中？ [复制]
【发布时间】：2021-10-03 01:37:54
【问题描述】：

使用内联块和margin-left auto 和margin-right auto 图像不居中

【问题讨论】：

你能提供给我们代码吗？
无需大喊大叫，清楚地解释您的问题并添加足够的代码来重现您的问题。没有人会猜到你到底做了什么。

标签： css web frontend

【解决方案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>

【讨论】：

此图像位于其容器的中心，但没有响应，因此它不会位于您的屏幕中心。

【解决方案2】：

图像居中且响应迅速。

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>

【讨论】：