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

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/