CSS

Question

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

我想做的是尝试将图标和文字置于<li>的中心位置，这样当菜单变得流畅和调整大小时，文本和图标就会保留在元素的中心。 / p>

我已经创建了一个jsfiddle并试图这样做，但我似乎无法让事情变得非常正确。谁能给我一些指示？

http://jsfiddle.net/PuZwb/

Answer 1

要按照您的方式进行操作，您必须为<li>添加宽度。请参阅此updated fiddle以了解我的意思。

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

Answer 2

以下是解决方案：http://jsfiddle.net/PuZwb/2/。您需要将精灵包含在元素或:before之类的伪选择器中，然后使用display: inline-block然后使用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}

Answer 3

将你的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;

这会使你的中心很好很简单

div中的图标和文字

3 个答案:

CSS