Vertically aligning an icon

I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:

<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-pos开发者_StackOverflow中文版ition:0,16px}

my sprite is always aligned to the bottom, while the checkbox and text are in the middle.

This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.

I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.

If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.

You need to specify the background-position property. Like so:

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

Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.

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