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

嗨我想中心在div中的4个图像。正如你所看到的，他们被困在左边。将div中的内容居中。保证金0，自动不起作用。也没有显示：内嵌

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; 


}

来源

2015-04-02 Superunknown

添加text-align: center到这个div #slide-6

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

和父DIV

text-align: center

来源

2015-04-02 10:00:55

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

来源

2015-04-02 09:59:20

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

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

JsFiddleExample

来源

2015-04-02 10:03:21 Nima

尝试display: inline-block:不是仅仅块。

来源

2015-04-02 10:05:02

单程

<center></center>

继承人小提琴之内，只是封装一切:)

https://jsfiddle.net/qcoavm5r/

来源

2015-04-02 10:17:40 josh

元素在HTML中被弃用，因为它定义了其内容的表示并且没有描述其内容。 – Nima 2015-04-02 10:19:10

提供文本对齐：中心父元素 'hsContainer'。该属性将居中对齐其中的元素。

来源

2015-04-02 10:23:06 Shree

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

回答

相关问题