Question

我有一个4元素的水平列表，使用精灵图像作为li背景，我一直试图在页脚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获得一个居中的红色框，但列表元素被推到左边缘。如果我添加保证金：0自动;到UL它保持不变。如果我添加margin-left：100px它确实将它移向中心，但我不想使用固定值，除非我绝对不得不这样做。

Answer 1

将一些竞争属性剥离到最低限度。

JSfiddle Demo

<强> CSS

#footer-share-links {
    width:400px;
    text-align:center; /* this centers the inline-block list items */
    margin:10px auto;
    background:#FF6666;
    border: 1px solid red;
    height:36px;
}

#footer-share-links ul {
    padding:0;
    position:relative;
    list-style-type:none;
    margin: 0;
}
#footer-share-links li  {
    display:inline-block;
    width:26px;
    height:36px;
    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-6.jpg);
    background-position: center;
}

Answer 2

这是一种方法，尝试以下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元素的宽度，以便链接具有足够的活动/控制区域。< / p>

Answer 3

您需要做什么：

#footer-share-links li  {
    /*margin:0 auto;*/
    display:inline-block;   // change this to inline-block
    /*float:left;*/
    text-align:center;
    /*position:absolute;*/

}

#footer-share-links ul {
    ... 
    ...
    margin: 0; // add this
}

取出我评论过的那些，它有效

使用CSS精灵背景水平居中UL导航

3 个答案: