为什么我的图像没有集中在div上？

Question

Can anyone tell me why this doesn't work? I'm trying to center the image.

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

the img-center container has width 100% ( by default ) so it is already centered but covers the width of all the viewport . this is because a div is a block element and as the DOCumentation says

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.

so you can remove the display:block

option A. add text-align:center to .img-container

for this option you can remove all other styles

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

option B. give the styles to the img not to it's container

for this option you need to keep the display:block to the img because img is an inline element by default

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

Answer 2

Your code centers the container of the image (which is already full width aka it doesnt do anything), not the image itself inside that container. Just do this:

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

Fiddle

Answer 3

Just Simply add text-align: center; to .img-center

Answer 4

This has to do with your <div class="img-center"> not having a set width. Add width:100px; just to see.

See this : https://jsfiddle.net/s3x82hv4/