title: Center background image from sprite
body: <p>I have menu as follows:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;First Item&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Long Item&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Very very short Item&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Another Item&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Last Item&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to use sprite image as background in CSS. I would like the image to be centered in different width menu items. Currently, for the first item correct CSS is:</p>
  
  <pre><code>background: url(images/sprite.png) no-repeat -20px -10px;
  </code></pre>
  
  <p>For the second:</p>
  
  <pre><code>background: url(images/sprite.png) no-repeat -24px -10px;
  </code></pre>
  
  <p>For the third:</p>
  
  <pre><code>background: url(images/sprite.png) no-repeat -32px -10px;
  </code></pre>
  
  <p>And so on. I don't know the exact width of each element, and it can change at any moment.</p>
  
  <p>I have access to HTML structure, so I can add some tags if it is needed.
  Is it possible to center background image in that case?</p>