Сделать положение фонового изображения по вертикали в центре слева

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/