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;
}

使用此

Answer 2

text-align会影响元素的内联内容。

图片不是<img>的内容，而是<img>。

要让text-align影响它，您必须将该属性应用于<img>的父。

Answer 3

嗨img是内联网，所以你不能添加text-align：center;印象添加父div来检查此

.wrap {
  height: 1000px;
  width: 1000px;
  background-color: lightGrey;
  margin: 20px auto;
  border: 1px solid black;
  text-align: center;
}

.wrap img {
  border-radius: 12px;
  text-align: center;
}

.wrap p {
  
  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 4

你的.wrap类应该有text-align：center

.wrap {
  height: 1000px;
  width: 1000px;
  background-color: lightGrey;
  margin: 20px auto;
  border: 1px solid black;
  text-align: center;
}

.wrap img {
  border-radius: 12px;
}

.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 5

只需将其添加到您的CSS

即可

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

Answer 6

添加

margin: 0 auto;
display: block;

因此它应该是：

.wrap img {
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}

或者您也可以将text-align:center添加到.wrap

以下是fiddle：

Answer 7

在课程text-align: center;

中的换行中添加样式

＆＃13;

.wrap {
  height: 1000px;
  width: 1000px;
  background-color: lightGrey;
  margin: 20px auto;
  border: 1px solid black;
  text-align: center;
}

.wrap img {
  border-radius: 12px;     
}

.wrap p {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
}

＆＃13;

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

＆＃13;

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

7 个答案: