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

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

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

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

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

Answer 2

Вам необходимо указать свойство background-position.Например:

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

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

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