title: How to center image on hover? (currently hovering on the left hand side)
body: <p>I've been looking on stackoverflow and trying different things, but nothing seems to work.</p>
  
  <p>I'm out of ideas.</p>
  
  <p>I have this menu here (for now, my links are inactive)</p>
  
  <pre><code>&lt;nav id="nav-left-en"&gt;
              &lt;nav id="services-en"&gt;
                  &lt;a href="#"&gt;Services&lt;/a&gt;
              &lt;/nav&gt;
  
              &lt;nav id="mission-en"&gt;
                  &lt;a href="#"&gt;Our Mission&lt;/a&gt;
              &lt;/nav&gt;
  
              &lt;nav id="contact-en"&gt;
                  &lt;a href="#"&gt;Contact&lt;/a&gt;
              &lt;/nav&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p>And I would like that, upon hovering over it the image centers. My text itself is not  aligned to the center (hence the problem I have -  but I do not want to center it to the center, because the hover has to look the same everywhere). Right now, the hover appears aligned-left with the text itself.</p>
  
  <p>This is the last css I tried. I've tried others, but I'm out of ideas. I've had no luck with stackoverflow and other places that were looking at this type of things.</p>
  
  <p>(note: I have also tried with background-image as well)</p>
  
  <pre><code>background: url('images/hover.jpg')  no-repeat;
              border: 0;
          width:150px; /* this is the width I want it to be. The text itself is 115px*/
          color:white;
          background-position: -58px 0px ;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I edited the code... and this is exactly what I am looking for, EXCEPT that there is an extra space on each side. For example, Let's say that I have 120px in width for each item, well, the color should be 150px in width. Thus, an extra 15px on each side.</p>
  
  <pre><code>$(document).ready(function() {
  
      $('nav').hover(
          function () {
              $(this).css({"background-color":"#108040"});
              }, 
                  function () {
                      $(this).css({"background-color":""});
                  }
      );
  
  });
  </code></pre>
  
  <p>Perhaps this code will help you in understanding what I'm looking for. In this case, I decided to use js (as it is shorter than the css that does the same thing)</p>