Question

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

理想情况下，如果我删除箭头或Facebook列表项，其他人应该继续在容器中居中。在尝试浮动和显示后，我对如何实现我想要的东西感到有点困惑：内联块和内联方法并且结果很少。通过使用display：inline，我能够实现我想要的纯文本，但是这些需要是背景图像，箭头的宽度与社交媒体图标的宽度不同。（也可以变成精灵，而不是个人精灵）

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

添加text-align：center到socialbox会做什么吗？

Answer 2

有两个问题，我可以看到

您有一个选择器#social ul，它应该只是#social或ul。否则它不适用于<ul id="social">
ul是一个块级元素，因此它会扩展到整个宽度 - 蓝色边框可以看到 - margin: auto无效。为此，您可以设置一个宽度，用于围绕子项并相应地调整padding

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

JSFiddle进行测试。

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

<强>更新：

如果您想避免设置宽度，可以使用@ ajgiv的建议并将text-align: center添加到外部div socialbox。但是，您还必须通过设置display: inline-block

使social成为内联元素

#socialbox {
    text-align: center;
}

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

请参阅JSFiddle

水平居中列出具有不同背景图像宽度的项目

2 个答案: