title: Center align background images between list items
body: <p>I'm building a responsive website which has a standard navigation. Each <code>&lt;li&gt;</code> element has a background image, <a href="https://jsfiddle.net/j0c1w162/" rel="nofollow">like so</a>:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
      width: 960px;
      max-width: 90%;
      margin: 0 auto;
  }
  ul {
      width: 100%;
  }
  li {
      float: left;
      width: 16%;
      list-style: none;
      text-align: left;
      background: url(http://bit.ly/1D60g6m) no-repeat 68% 0;
      background-size: 10%;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;One&lt;/li&gt;
              &lt;li&gt;Two&lt;/li&gt;
              &lt;li&gt;Three&lt;/li&gt;
              &lt;li&gt;Four&lt;/li&gt;
              &lt;li&gt;Five&lt;/li&gt;
              &lt;li&gt;Six&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <code>background-position</code> roughly aligns the background image to the middle of each <code>&lt;li&gt;</code>. </p>
  
  <p>As you reduce the viewport width, the image is no longer aligned to the middle. This is more noticeable when I use different background images for each <code>&lt;li&gt;</code>.</p>
  
  <p>Is there a better way I can align the background image to the whitespace between each <code>&lt;li&gt;</code>?</p>