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％（默认情况下），因此它已经居中但覆盖了所有视口的宽度。这是因为div是block元素，而DOCumentation是

块级元素始终在新行上开始并占用可用的全部宽度（尽可能向左和向右延伸）。 <div>元素是块级元素。

因此您可以删除display:block

选项A。将text-align:center添加到.img-container

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

＆＃13;

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

＆＃13;

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

＆＃13;

选项B。将样式提供给img而不是它的容器

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的代码集中了图像的容器（已经是全宽，也就是说什么也没做），而不是容器内的图像本身。就这样做：

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

Fiddle

Answer 3

只需将text-align: center;添加到.img-center

即可

Answer 4

这与您的<div class="img-center">没有设定宽度有关。添加width:100px;只是为了查看。

请参阅：https://jsfiddle.net/s3x82hv4/

为什么我的图像不以div为中心？

4 个答案: