html - 在 div 中将内容居中。 margin 0，自动不起作用。也不显示 :inline

Question

您好，我正在尝试将 4 个图像置于 div 的中心。如您所见，它们卡在了左侧。

我希望它们完全居中对齐，周围至少有 5-10 像素的边距(稍微向右移动)。我只关心这一部分……而不是 HTML 站点的其余部分。谢谢。我的 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;
}

在父 div 上

文本对齐:居中