Question

嗨我正试图将4个图像居中在div中。你可以看到他们被困在左边。

enter image description here

我希望它们完全中心对齐，周围至少有5-10px的边距（稍微向右移动）。这只是我关注的这一部分...而不是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

使用像960gs这样的网格系统可以让您的生活更轻松。否则，您必须将图像放入宽度为25％，0边距和0填充的容器中。您可以在容器的内容上设置边距和填充。或者使hsContainer固定宽度并给它margin：auto;

Answer 2

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

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

和父div

text-align: center

Answer 3

您的包装器需要width margin:0 auto，以便内部内容与中心对齐。

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

JsFiddle Example

Answer 4

将一切内容封装在

中的一种方法

<center></center>

这是一个小提琴：）

https://jsfiddle.net/qcoavm5r/

Answer 5

将text-align：center提供给父元素'hsContainer'。此属性将居中对齐其中的元素。

Answer 6

请尝试display: inline-block:而不是阻止。

在div中居中内容。保证金0，自动不起作用。也没有显示：内联

6 个答案: