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

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/