Question

我有一个带有社交媒体图标的页脚。我希望图标排列成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

Answer 1

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

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

Answer 2

<img>是替换的内联元素（默认情况下）。图像元素像文字一样彼此相邻。因此，无需将其显示类型更改为block（正如您在现场演示中所做的那样）。

我希望图标以3 x 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;
}

Answer 3

我想你想要这样的事，对吧？

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），您可以根据需要进行调整

注意：

关于展示属性，请参阅W3C's visual formatting model。

关于盒子型号规格，您可以参考W3C's box model。

取决于您的浏览器兼容性计划，IE8中不支持max-width，IE8有一些错误。有关详细信息，请参阅online compatibility chart like this。

如果你使用jQuery并且真的意味着支持IE6-8，你可以考虑使用polyfill，例如Scott Jehl's Respond.js

编辑：我认为@Matt Smith的回答是你想要的，我可能误解了你的意思。无论如何，供你参考。

保持图像不会破碎到下一行而不浮动

3 个答案: