title: positioning divs with css sprites: is there a way to auto vertical-center for a neater result
body: <p><a href="http://jsfiddle.net/chrisloughnane/CGcdc/" rel="nofollow">jsfiddle with example</a></p>
  
  <p>Click a county name to see it's crest appear.</p>
  
  <p>I am appending divs as they are needed and the background for each div is from a css sprite which works perfectly. What I would like is to vertical center each added div so they line up more neatly.</p>
  
  <p>I can add <code>position: relative; top: XXpx;</code> and amend the top manually for each each crest e.g.<code>.Corksmall { background-position:  -25px -27px; height: 27px; width: 25px; position: relative; top: 5px;}</code> but that seems like the brute force method.</p>
  
  <p>Is there a more coder pleasing way of doing this? tia</p>