1

您好，我正在开发一个网站....这是我的第二个网站，我正在尝试将 ul 居中在一个 div 中我想将图标放在锚标签中并使用背景定位来使用精灵....问题是如何我可以将 ul 设置为在 div 内还是在 ul 内居中...我的代码示例如下：

http://jsfiddle.net/kowen/wAdf3/1/

这是代码：（html）

<div id="container">
<ul>
    <li><a class="fbicon" href="#">hola 1</a>

    </li>
    <li><a class="twttricon" href="#">hola 2</a>

    </li>
    <li><a class="sndcloudicon" href="#">hola 3</a>

    </li>
    <li><a class="emailicon" href="#">hola 4</a>

    </li>
</ul>

和CSS：

    #container {
    width: 400px;
    height:400px;
    text-align: center;
    background-color:gray;
}
#container ul {
    display: inline-block;
}
#container li {
   /* float: left;*/
    height: 33px;
    line-height: 30px;
    text-indent:-999em;
}
#container li a {
    width:32px;
    height:32px;
    background-image:url(http://www.testcloud.com.ar/social-icons.png);
}
a.fbicon {
    background-position:-5px center;
}
a.twttricon {
    background-position:-42px center;
}
a.sndcloudicon {
    background-position:-111px center;
}
a.emailicon {
    background-position:-148px center;
}

我已经尝试了一些食谱，但不知道我该怎么做……我怎样才能让 a 显示为一个块，以便它可以在屏幕上显示完整的图标？？？在此先感谢您的帮助。称呼

4

0 回答 0