Question

我有四个图标我设置为内联显示，我现在正试图将它们包含在div中的列表居中。

这是HTML：

<div id="social_media">
     <ul>
           <li><a href="http://wwww.facebook.com"><img src="../images/social_media_icons/facebook_icon.png"></a></li>
           <li><a href="http://wwww.wikia.com"><img src="../images/social_media_icons/wikia_icon.png"></a></li>
           <li><a href="#"><img src="../images/social_media_icons/rss_icon.png"></a></li>
           <li><a href="#"><img src="../images/social_media_icons/mail_icon.png"></a></li>
     </ul>
</div>

CSS：

 #social_media
{
    width:220px;
    margin:10px auto;
    padding:0 2px;
}

#social_media ul li 
{
    display:inline;
    margin:0 3px;
    list-style-type:none;
}

四个图标为48px正方形，总宽度为192px，每个图标的水平边距为3px，另外24px宽，整个列表的宽度为216px。它们包含在（social_media）中的div是220px宽，2px的水平填充，用于216px的空间，理论上，该列表应该完全适合。

然而，当我实际执行此操作时，第四个图标会直接撞到下一行，直接位于第一行之下。当我将3px更改为auto时，它们都适合同一行，但距离太近。无论我做什么，列表都是左边的，而不是它应该是的中心。

帮助？

Answer 1

鉴于您发布的CSS，可能忘记了padding元素上的默认ul。在大多数浏览器中，它是40px。但是，重置此值，不会解决整个问题，因为真正的问题在于inline元素尊重标记中的空白并生成{{1}存在时的空格。这是问题的根源;因此，我建议您查看this answer，具体解决此问题。

鉴于没有涉及任何文本，您可以在父~2px元素上设置font-size:0，从而删除此空间。假设确实存在文本，您只需在受影响的子元素上指定新的ul。

EXAMPLE HERE

font-size

或者，最好的方法是从标记中实际删除空格。看看this example中的标记。

Answer 2

尝试

#social_media ul li img {
  padding: 3px;
}

将一行内嵌图像居中

2 个答案: