Html 将具有不同背景图像宽度的列表项水平居中

我在容器div中水平居中列表项时遇到问题。我曾尝试在li和li a上使用display:inline，但这没有帮助。我还尝试了ul和li上的文本对齐中心，但没有给出结果。我的解决方案几乎就在那里，但是如果我从HTML中删除两个箭头，它会断开，看起来像是发布在这里的第二个图像，而不是自动将社交媒体图标居中。为了排除故障，我现在在每件事周围都有边界

理想情况下，如果我删除一个箭头或一个facebook列表项，其他的应该继续在容器中居中。在尝试了float和display之后，我对如何实现我想要的东西感到有点困惑：inline block和inline方法，但几乎没有结果。通过使用display:inline，我可以用纯文本实现我想要的，但是这些需要是背景图像，箭头的宽度与社交媒体图标的宽度不同。（我想也可以变成精灵，而不是单个的）

HTML:

---

下图是我的Solution当前的样子，它实际上是左侧的2个像素，几乎没有居中

向socialbox添加文本对齐：居中是否有任何作用？

我发现有两个问题

• 您有一个选择器

  #social ul

  ，它应该是

  #social

  或

  ul

  。否则它不适用于

• ul

  是一个块级元素，因此它延伸到整个宽度（如蓝色边框所示），

  margin:auto

  没有效果。要使其工作，您可以设置一个宽度，该宽度包含子项，并相应地调整

  填充

#社交{
宽度：240px；
列表样式：无；
保证金：0自动；
左侧填充：20px；
}

用于测试

另一种选择是，您可以增加最左边子项的边距，例如，

facebook

更新：

如果您不想设置宽度，可以使用@ajgiv的建议并将其添加到外部div

socialbox

。但是，您还必须通过设置

#社交箱{
文本对齐：居中；
}
#社会的{
显示：内联块；
左侧填充：15px；
}

---

请参见

您的问题到底是什么？第一张图片在我看来完全居中。当我删除右箭头和左箭头的列表项（如第二个示例所示）时，3个社交媒体图标在分区内不会居中。不，当删除我在其中显示的任何列表项时，它仍然不会居中。很奇怪。我也看过其他一些类似问题的stackoverflow页面和复制的代码，但是当删除一个项目时，它不会保持居中。谢谢。有趣的是，当我在左箭头和右箭头中添加时，它需要是UL上的{overflow:auto；border:1px纯蓝色；list style:none；margin:0 auto；width:350px；}。如果没有箭头，那么您的示例就是完美的。我想设定的宽度很重要——我忽略了这一点。再次感谢@詹姆斯：是的，您必须调整宽度以适合封闭的儿童。请参阅更新的答案以获取替代方案。

 <div id="socialbox">
    <ul id="social">
      <li id="leftarrow"><a></a></li>
      <li id="facebook"><a href=""></a></li>
      <li id="twitter"><a href=""></a></li>
      <li id="youtube"><a href=""></a></li>
      <li id="rightarrow"><a></a></li>
    </ul>
</div>

#socialbox {width:400px; border:1px solid black; margin:0 auto; margin-top:0px; }
#social{overflow:auto; border:1px solid blue;}
#social ul {list-style:none; margin:0 auto;}
#social li{float:left; margin-right:15px;border:1px solid red;}
#social li, #social a{height:53px;display:block;}

#leftarrow{width:30px; border:0px solid black; background:url('../img/leftarrow.png')no-repeat 0 0px;}
#leftarrow a:hover{background: url('../img/leftarrow-hover.png')no-repeat 0 0;}

#rightarrow{left:0px;width:30px; border:0px solid black;background:url('../img/rightarrow.png')no-repeat 0 0px;}
#rightarrow a:hover{background: url('../img/rightarrow-hover.png')no-repeat 0 0;}

#facebook{width:62px; border:0px solid black; background:url('../img/facebook.png') 0 0}
#facebook a:hover{background: url('../img/facebook-on.png') 0 0;}