title: Display Images Over List Item Menu Links
body: <p>I need a cross-browser solution for having list item menu links with images. I'm using the default ASP.NET MVC 4 template and I have the following generated HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul id="menu"&gt;
    &lt;li&gt;
      &lt;a href="/Home/Item01"&gt;
        &lt;img src='/Images/MenuItem01.gif'/&gt;
        Menu Item 01
      &lt;/a&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;a href="/Home/Item02"&gt;
        &lt;img src='/Images/MenuItem02.gif'/&gt;
        Menu Item 02
      &lt;/a&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;a href="/Home/Item03"&gt;
        &lt;img src='/Images/MenuItem03.gif'/&gt;
        Menu Item 03
      &lt;/a&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>ul#menu {
      font-size: 1.3em;
      font-weight: 600;
      margin: 0 0 5px;
      padding: 0;
      text-align: left;
  }
  
  ul#menu li {
      display: inline;
      list-style: none;
      padding-left: 15px;
  }
  
  ul#menu li a {
      background: none;
      color: #999;
      text-decoration: none;
  }
  
  ul#menu li a:hover {
      color: #333;
      text-decoration: none;
  }
  </code></pre>
  
  <p>Here's a Fiddle: <a href="http://jsfiddle.net/EY3ad/" rel="nofollow">http://jsfiddle.net/EY3ad/</a></p>
  
  <p>I'd like to have each image above the text and centralized. I haven't done pure HTML and CSS in years so any help would be appreciated. :)</p>