title: Vertically aligning an icon
body: <p>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:</p>
  
  <pre><code>&lt;div class="i_contain_things"&gt;
    &lt;div class="i_float_left"&gt;&lt;checkbox/&gt;&lt;/div&gt;some text
    &lt;div class="i_float_right"&gt;
      &lt;span class="sprite icn1"&gt;my sprite&lt;/span&gt;
      &lt;span class="sprite icn2"&gt;my sprite&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .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}
  </code></pre>
  
  <p>my sprite is always aligned to the bottom, while the checkbox and text are in the middle.</p>