title: CSS - align image icon with select box
body: <p><strong>EDIT</strong><br>
  OK I think I found a solution, found on <a href="http://www.student.oulu.fi/~laurirai/www/css/middle/" rel="nofollow">http://www.student.oulu.fi/~laurirai/www/css/middle/</a>
  I used the <em>absolute positioning</em> technique.<br>
  I hope it works in IE because I can't check it right now...<br>
  The CSS is updated.<br>
  <strong>END EDIT</strong></p>
  
  <p>I have a language selector in a select box.  </p>
  
  <p>On the left side of the box I want a flag with a active language. This will be changed with javascript when the language get's changed.  </p>
  
  <p>Only thing that remains is to horizontally align the flag with the select box with CSS - cross browser.</p>
  
  <p>CSS: </p>
  
  <pre><code>.combo {
      background: silver;
      margin: 10px 0;
      position:relative;
      height: 50px;
  }
  
  .combo span {
      position:absolute;top:0;bottom:0;margin:auto;
      display: block; float: left;
      width: 16px; height: 11px;
      background:url('flags.png') no-repeat;
  }
  
  .combo select {
      position:absolute;top:0;bottom:0;margin:auto;
      margin-left: 25px;
  }
  
  .combo span.flag-es {background-position: -16px 0}
  .combo span.flag-fr {background-position: -32px 0}
  .combo span.flag-gb {background-position: 0 -11px}
  .combo span.flag-it {background-position: -16px -11px}
  .combo span.flag-nl {background-position: -32px -11px}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="combo"&gt;
      &lt;span class="flag-it"&gt;&lt;/span&gt;
          &lt;select&gt;
              &lt;option value="Italiano" selected&gt;Italiano&lt;/option&gt;
              &lt;option value="English"&gt;English&lt;/option&gt;
              &lt;option value="Français"&gt;Français&lt;/option&gt;
              &lt;option value="Español"&gt;Español&lt;/option&gt;
              &lt;option value="Nederlands"&gt;Nederlands&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>