2014-03-19 74 views
1

我有一個社交媒體圖標的頁腳。我想要像下面那樣排列在3 x 3網格 中的圖標。保持圖像不會浮動到下一行沒有浮動

@@@

@@@

@@@

我也希望它在一個div居中。我快進,問題是,當我漂浮的元素留下,讓他們在同一行我

margin-left:auto; 
margin-right:auto; 

不工作,他們只是左對齊。我需要一個適用於移動設備的解決方案,因爲我的整個網站都能夠響應。

下面是HTML

<div class="d-all m-all" id="mainFooter"> 
    <div class="d1-d4 m-all" id="socialMedia"> 
     <div id="centerIcons"> 
      <img src="images/fb_icon_vi.png"><img src="images/tw_icon_vi.png"><img src="images/in_icon_vi.png"> 
     </div> 
    </div> 
    <div class="d5-d8 m-all" id="contact"> 
     Contact 
    </div> 
    <div class="d9-d12 m-all" id="awards"> 
     awards 
    </div> 
</div> 

這裏是CSS

#mainFooter{ 
    background-color:black; 
    height:250px; 
} 


#socialMedia{ 
    background-color:green; 
} 
    #socialMedia img{ 
     display:block; 


    } 

    #centerIcons{ 
     background-color:yellow; 
     width:50%; 
     margin-left:auto; 
     margin-right:auto; 
     height:75px; 
    } 
     #centerIcons img{ 
      margin-left:auto; 
     margin-right:auto; 
     } 

整個網站可以看到HERE

回答

1

<img>是一個替換的內聯元素(默認情況下)。圖像元素像文字一樣坐在彼此旁邊。因此,不需要將其顯示類型更改爲block(正如您在現場演示中所做的那樣)。

我想安排在一個3×3格的圖標

爲了做到這一點,你可以用一個包裝包裝每個3張圖片,並添加text-align: center該元素對準內置圖片水平。

EXAMPLE HERE

<div id="centerIcons"> 
    <div class="wrapper"> 
     <img src="images/1.png"> 
     <img src="images/2.png"> 
     <img src="images/3.png"> 
    </div> 
    <div class="wrapper"> 
     <img src="images/4.png"> 
     <img src="images/5.png"> 
     <img src="images/6.png"> 
    </div> 
    <div class="wrapper"> 
     <img src="images/7.png"> 
     <img src="images/8.png"> 
     <img src="images/9.png"> 
    </div> 
</div> 
.wrapper { 
    text-align: center; 
} 
+1

這工作。我會盡我所能接受答案。謝謝! – onTheInternet

+0

@onTheInternet你很受歡迎。此外,爲了抑制換行符,你可以在包裝器中添加'white-space:nowrap;'。 ** [此處示例](http://jsbin.com/cuhococo/2/edit)**。 –

1

添加text-align: center#centerIcons {}規則和display: inline-block#centerIcons img {}規則:

#centerIcons img { 
    text-align: center; 
} 
#centerIcons img { 
    display: inline-block; 
} 
+0

這有我想要的效果,但將圖像左對齊 – onTheInternet

1

我想你想這樣的事情,對不對?

enter image description here

#socialMedia img { 
    display: inline-block; 
}  
    #centerIcons{ 
      background-color:yellow; 
      width:50%; 
      height:75px; 
      max-width: 171px; 
      margin: 0 auto; 
     } 
      #centerIcons img{ 
       /* nothing is needed */ 
      } 

說明:

display: inline-block;將繼續爲塊而不是開啓新行

因爲#centerIcons是一個DIV元素,它是塊元素,使使用對中效果margin: 0 auto;需要寬度控制

所以max-width: 171px;將其寬度約束到最大171px(圖標寬57px * 3),你可以調整你需要

注:

關於display屬性,請參考W3C's visual formatting model

關於箱型規格,您可以參考W3C's box model

取決於您的瀏覽器兼容性計劃,下面的IE8不支持最大寬度,IE8有一些錯誤。有關詳細信息,請參閱online compatibility chart like this

如果您正在使用jQuery和真的要支持IE6-8,您可以考慮使用填充工具如Scott Jehl's Respond.js

編輯:我覺得@馬特·斯密的答案是你想要什麼,我可能會誤解你的意思。無論如何,供您參考。