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

Question

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

理想情况下，如果我删除箭头或 facebook 列表项，其他项应继续在容器内居中。在尝试 float 和 display:inline-block 和 inline 方法但收效甚微后，我对如何实现我想要的结果感到有点困惑。通过使用 display:inline，我能够用纯文本实现我想要的效果，但是这些需要是背景图像，并且箭头的宽度与社交媒体图标的宽度不同。 (我想也可以变成 Sprite 而不是单个 Sprite )

HTML:

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

CSS:

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

下图是我的解决方案目前的样子，它实际上是左侧 2 个像素到一点点，而不是居中。

Answer 1

有两个问题，我可以看到

• 你有一个选择器 #social ul , 这应该只是 #social或 ul .否则它不适用于 <ul id="social">
• ul是一个 block 级元素，所以它延伸到整个宽度 - 从蓝色边框可以看出 - 和 margin: auto没有效果。为此，您可以设置一个宽度来包围子项并调整 padding。据此

#social {
    width: 240px;
    list-style:none;
    margin:0 auto;
    padding-left: 20px;
}

JSFiddle用于测试。

作为替代方案，您可以增加最左边 child 的边距，例如facebook .

更新:

如果你想避免设置宽度，你可以使用@ajgiv 的建议并添加 text-align: center 到外部 div socialbox .但是，您还必须制作 social通过设置 display: inline-block 的内联元素

#socialbox {
    text-align: center;
}

#social {
    display: inline-block;
    padding-left: 15px;
}

参见 JSFiddle