將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，自動不起作用。也沒有顯示：內嵌

回答

相關問題