使用CSS Sprite背景将UL导航水平居中

debugcn 发表于 Dev

史蒂夫

我有一个使用精灵图像作为li背景的4元素水平列表，我一直试图将其放置在页脚div中。在这一点上，我认为我只是在圈子里随机奔跑，试图改变样式以获取它。这是相关的CSS和HTML：

#footer-share-links {
    width:400px;
    text-align:center;
    margin:10px auto;
    background:#FF6666;
    border: 1px solid red;
    height:36px;
}

#footer-share-links ul {
    padding:0;
    position:relative;
    list-style-type:none;
}
#footer-share-links li  {
    margin:0 auto;
    display:inline;
    float:left;
    text-align:center;
    position:absolute;
}
#footer-share-links li, #footer-share-links a   {
    height:36px;
}
#ftr_facebook   {left:0px;width:25px;}
#ftr_facebook   {background:url('sprites/spriteGlobal.2014-0001.png') 0 0;}
#ftr_twitter    {left:30px;width:26px;}
#ftr_twitter    {background:url('sprites/spriteGlobal.2014-0001.png') -25px 0;}
#ftr_gplus      {left:61px;width:26px;}
#ftr_gplus      {background:url('sprites/spriteGlobal.2014-0001.png') -77px 0;}
#ftr_linkedin   {left:93px;width:26px;}
#ftr_linkedin   {background:url('sprites/spriteGlobal.2014-0001.png') -51px 0;}

div上的背景和边框只是为了帮助我看到该框。HTML是：

  <div id="footer-share-links">
    <ul>
      <li id="ftr_facebook"><a href=""></a></li>
      <li id="ftr_twitter"><a href=""></a></li>
      <li id="ftr_gplus"><a href=""></a></li>
      <li id="ftr_linkedin"><a href=""></a></li>
    </ul>
  </div>

使用此方法，我从div中得到了一个居中的红色框，但是列表元素被推到了左边缘。如果我添加margin：0 auto; 对UL而言，它保持不变。如果我添加margin-left：100px，它的确会将其移向中心，但是除非绝对必要，否则我不想使用固定值。

马克·奥德（Marc Audet）

这是一种实现方法，请尝试以下CSS：

#footer-share-links {
    width:400px;
    text-align:center;
    margin:10px auto;
    background:#FF6666;
    border: 1px solid red;
    height:36px;
    line-height: 36px;
}

#footer-share-links ul {
    padding:0;
    margin: 0;
    list-style-type:none;
}
#footer-share-links li  {
    margin: 0;
    display: inline-block;
    width: 50px;  /* demo only */
    background-color: yellow; /* demo only */
}
#footer-share-links a {
    display: block; /* or inline-block */
}

演示：http：//jsfiddle.net/audetwebdesign/yN5MP/

如前所述，删除所有浮子和绝对位置。

对于父容器#footer-share-links，将其设置为line-height等于该height值，这样，垂直居中就可以自己处理了。

在ul元素上，确保将边距清零。

最后，在li元素上使用display: inline-block以便识别宽度。

您可以根据需要使用id名称来指定各个li元素的宽度。

在a元素（链接）上，用于display: block使链接占据li元素的宽度，以便链接具有足够的活动/控制区域。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。