html - CSS:居中图像。为什么不 'text-align: center' ？

Question

我必须将图像置于固定大小的 div 容器中。

我的第一个想法是:img 是一个内联元素。所以你可以使用text-align: center。与文字一样。

但这行不通。

我做了这个演示:

.wrap {
  height: 1000px;
  width: 1000px;
  background-color: lightGrey;
  margin: 20px auto;
  border: 1px solid black;
}

.wrap img {
  border-radius: 12px;
  text-align: center;
}

.wrap p {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
}

<div class="wrap">
  <img src="https://placebear.com/200/300" alt="bild" />
  <p>Just a little bit of placeholder-text.</p>
</div>

可以看出:文本居中效果非常好。但是图像居中失败。

我在这里做错了什么？分别:我的哪些假设是错误的？

Answer 1

.wrap {
  text-align: center;
}

用这个