保持图像不会浮动到下一行没有浮动

我有一个社交媒体图标的页脚。我想要像下面那样排列在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

来源

2014-03-19 onTheInternet

<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; 
}

来源

2014-03-19 15:18:03

这工作。我会尽我所能接受答案。谢谢！ – onTheInternet

@onTheInternet你很受欢迎。此外，为了抑制换行符，你可以在包装器中添加'white-space：nowrap;'。 ** [此处示例]（http://jsbin.com/cuhococo/2/edit）**。 –

添加text-align: center到#centerIcons {}规则和display: inline-block您#centerIcons img {}规则：

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

来源

2014-03-19 15:13:45

这有我想要的效果，但将图像左对齐 – onTheInternet

我想你想这样的事情，对不对？

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

编辑：我觉得@马特·斯密的答案是你想要什么，我可能会误解你的意思。无论如何，供您参考。

来源

2014-03-19 15:44:11 simongcc

保持图像不会浮动到下一行没有浮动

回答

相关问题