使背景图像位置垂直居中向左

Question

我有我的工作图片，

我希望左侧的图标应该在相同的位置，但垂直居中对齐... 图标大小不一... 这可以通过我想要的 css 实现吗？？

这是我的代码，

.iconSmall {
    background-attachment: scroll;
    background-clip: padding-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 2% 50%;
    background-repeat: no-repeat;
}

<a href="index.html" style="background-image:url(images/001_56.png);" class="iconSmall">Beauty and Spas</a>

Answer 1

直到并且除非您的所有图标大小相同，否则代码不会按照您的意愿对齐。

但你能做的是

.iconSmall {
background-attachment: scroll;
background-clip: padding-box;
background-color: transparent;
background-origin: padding-box;
background-position: 2% 50%;
background-repeat: no-repeat;
}

然后让你的每个列表项都像另一个类一样

<li class="iconSmall foodResturant">....</li>
.foodResturant {
background-position:1px 2px;
}

Answer 2

是的，效果很好。您只需要指定位置并重复：

.iconSmall {
    background-position: 5px center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

您可能希望使用像素而不是百分比。如果您愿意，可以使用 center 关键字代替 50%。

提示：可以在元素上使用多个类，这样就可以将背景图片放在样式表中：

.iconSmall.beauty {
    background-image: url(images/001_56.png);
}

<a href="index.html" class="iconSmall beauty">Beauty and Spas</a>

演示：http://jsfiddle.net/Guffa/UrXA2/