html - 为什么我的图像不在 div 中居中？

Question

谁能告诉我为什么这不起作用？我正在尝试使图像居中。

CSS

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

HTML

<div class="container">
  <section id="whats-on">
    <h1>News</h1>
    <div class="img-center">
      <a href="#"><img src="assets/img/my-image.png"></a>
    </div>
  </section>
</div><!-- container -->

Answer 1

img-center容器的宽度为 100%(默认情况下)，因此它已经居中但覆盖了所有视口(viewport)的宽度。这是因为 div是 block元素，正如 DOCumentation 所说

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element.

所以你可以删除 display:block

选项 A. 添加 text-align:center至 .img-container

对于此选项，您可以删除所有其他样式

.img-center  {
	text-align:Center;
}

<div class="container">
     <section id="whats-on">
        <h1>News</h1>
       <div class="img-center">
          <a href="#"><img src="http://placehold.it/350x150"></a>
       </div>
    </section>
</div><!-- container -->

选项 B. 为 img 提供样式不是它的容器

对于此选项，您需要保留 display:block到 img因为img是一个 inline默认元素

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

<div class="container">
     <section id="whats-on">
        <h1>News</h1>
       <div class="img-center">
          <a href="#"><img src="http://placehold.it/350x150"></a>
       </div>
    </section>
</div><!-- container -->