Вертикальное выравнивание значка

Question

У меня есть значки. Проблема в том, что они не вертикально выравниваются по середине, как все остальное (текст, ввод). Моя HTML структура что-то вроде этого:

<div class="i_contain_things"> 
    <div class="i_float_left"><checkbox/></div>some text 
    <div class="i_float_right"> 
    <span class="sprite icn1">my sprite</span> 
    <span class="sprite icn2">my sprite</span> 
    </div> 
</div> 

.i_contain_things 
{ 
clear:both; 
margin-bottom:10px; 
vertical-align:middle; 
} 

.i_float_left 
{ 
padding:0 3px 0 3px; 
float:left; 
display:inline-block; 
} 

.i_float_right 
{ 
padding:0 3px 0 3px; 
float:right; 
display:inline-block; 
vertical-align:middle; 
} 

.sprite 
{ 
display:inline-block; 
background: url(../img/icn_sprite_1.png); 
width: 16px; 
height: 16px; 
vertical-align: middle; 
} 
.icn1{background-position:0,0} 
.icn2{background-position:0,16px} 

мой спрайт всегда выравнивается по нижней части, в то время как флажок и текст в середине.

Answer 1

Необходимо указать background-position. Подобно:

sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat; 

В случае, если первое число осей-х, и второе число для оси у Вы можете использовать проценты, пиксели или ключевые слова (справа, сверху, в центре), чтобы объявить положение фонового изображения ,

http://www.w3schools.com/css/css_background.asp

Answer 2

Это не будет работать, промежуток является встроенным элементом так, как только вы удалите текст, он будет разрушаться; height и width ничего не сделают.

Я не уверен, чего вы хотите добиться точно, но мне кажется, что вам нужно разместить свой спрайт в качестве фона для одного из элементов, которые у вас уже есть (например, .i_contain_things), а не поместить его в отдельный элемент.

Если вам нужно поместить его в отдельный элемент, вы должны убедиться, что подмигнули элемент уровня блока (например, div или span, который установлен в display:block). Этот элемент должен быть расположен там, где вы хотите.