在div中以内容为中心。页边距0，自动不工作。也不显示:内联

Question

嗨，我正试着在div中对4幅图像进行居中。如你所见，他们被困在左边。

​

​

我希望他们是完美的中锋，至少在他们周围有5-10%的保证金(稍微向右移动)。我只关注这个部分，about...not站点的其余部分。谢谢。我的html是：

   <section id="slide-6" class="homeSlide">
    <div class="bcg">
        <div class="hsContainer">
           <!-- <div class="hsContent">-->


                         <div class="img">
  <a target="_blank" href="">
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
  </a>
                                        </div>

                                         <div class="img">
  <a target="_blank" href="">
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
  </a>
                                        </div>

                                         <div class="img">
  <a target="_blank" href="">
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
  </a>
                                        </div>

                                         <div class="img">
  <a target="_blank" href="">
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
  </a>
                                        </div>




                                </div>


</div>
</div>
</section>

Css是：

#slide-6 .bcg {
position: relative;
background-color: #efefef;
height:50%;
}
slide-6 .hsContent {
        position: relative;
}
slide-6 .hscontainer {

        width: 100%;
        height: 100%;
         display:inline;
        overflow: hidden;


         margin: 0 auto; position: relative;
}

div.img {
    margin: 20px;
    /*padding: 5px;*/
    /*border: 1px solid #0000ff;*/
    /*height: auto;
    width: auto;*/
   /*float: left;*/
   display:inline;


}

Answer 1

将text-align: center添加到此div #slide-6中

div.img {
    display: inline-block;
    margin: 20px;
}

和家长的孩子

text-align: center

Answer 2

使用像九百六十这样的网格系统将使您的生活更轻松。否则，您将不得不将图像放入宽度为25%、0边距和0填充的容器中。不过，您可以在容器的内容上设置页边距和垫子。或者使hsContainer固定宽度并给它以毛边:自动；

Answer 3

为了使内部内容对齐中心，包装器需要一个带有width的margin:0 auto。

section {margin:0 auto;width:1290px;}

示例