html - div 中的居中图标和文本

Question

我正在玩一个教程，我发现一个图标显示在列表中的某些文本旁边。（http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/）

我想要做的是尝试使图标和文本居中，<li>这样当菜单变得流畅并调整大小时，文本和图标仍保留在元素的中心。

我创建了一个 jsfiddle 并尝试这样做，但我似乎无法完全正确。谁能给我一些指示？

http://jsfiddle.net/PuZwb/

Answer 1

要按照自己的方式进行操作，您必须在<li>. 请参阅此更新的小提琴以了解我的意思。

这也是使用:before伪选择器的好地方。

Answer 2

将你的 ul 包裹在一个 div 中，比如

body>
<div class="wrapper">
    <ul class="menu">
        <li id="cakes">cakes</li>
        <li id="donuts">donuts</li>
        <li id="rolls">rolls</li>
        <li id="pies">pies</li>
    </ul>
</div>

然后像这样的CSS

.menu {
width: 210px;
background-color: #09C; 
margin 0 auto;

}

.wrapper {
    width: 100%;
    background-color: #09C;

这将使您的 ul 居中，既美观又简单

Answer 3

这是解决方案：http: //jsfiddle.net/PuZwb/2/。您需要将精灵包含在一个元素或一个伪选择器中，例如:before然后使用display: inline-blockand then vertical-align: middle。

CSS

ul.menu li:before{
    content: '';
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-right: 10px;
    vertical-align: middle;
    background:url("http://chrisandjennyswedding.com/sprite.png") no-repeat;
}

ul.menu li#cakes:before   {background-position:0 0}
ul.menu li#donuts:before  {background-position:0 -64px}
ul.menu li#rolls:before   {background-position:0 -128px}
ul.menu li#pies:before {background-position:0 -196px}