我有一個社交媒體圖標的頁腳。我想要像下面那樣排列在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
這工作。我會盡我所能接受答案。謝謝! – onTheInternet
@onTheInternet你很受歡迎。此外,爲了抑制換行符,你可以在包裝器中添加'white-space:nowrap;'。 ** [此處示例](http://jsbin.com/cuhococo/2/edit)**。 –