在列表项目菜单链接上显示图像(Display Images Over List Item Menu Links)

我需要一个跨浏览器的解决方案，让列表项菜单链接图像。 我正在使用默认的ASP.NET MVC 4模板，我有以下生成的HTML：

<ul id="menu">
  <li>
    <a href="/Home/Item01">
      <img src='/Images/MenuItem01.gif'/>
      Menu Item 01
    </a>
  </li>

  <li>
    <a href="/Home/Item02">
      <img src='/Images/MenuItem02.gif'/>
      Menu Item 02
    </a>
  </li>

  <li>
    <a href="/Home/Item03">
      <img src='/Images/MenuItem03.gif'/>
      Menu Item 03
    </a>
  </li>

</ul>
 
 CSS： 
 
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;
}
 
 这是一个小提琴： http ： //jsfiddle.net/EY3ad/ 
 
 我想将每个图像放在文本上方并集中。 多年来我没有做过纯HTML和CSS，所以任何帮助都会受到赞赏。 :) 
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:
 
<ul id="menu">
  <li>
    <a href="/Home/Item01">
      <img src='/Images/MenuItem01.gif'/>
      Menu Item 01
    </a>
  </li>

  <li>
    <a href="/Home/Item02">
      <img src='/Images/MenuItem02.gif'/>
      Menu Item 02
    </a>
  </li>

  <li>
    <a href="/Home/Item03">
      <img src='/Images/MenuItem03.gif'/>
      Menu Item 03
    </a>
  </li>

</ul>
 
The CSS:
 
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;
}
 
Here's a Fiddle: http://jsfiddle.net/EY3ad/
 
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. :)
                
最满意答案
                
                    
                        
 你在找这样的东西吗？ 
 
 HTML： 
 
<ul id="menu">
    <li> <a href="/Home/Item01">
          <img src='http://lorempixel.com/48/48'/>
        <span>Menu Item 01</span>
        </a>

    </li>
    <li> <a href="/Home/Item02">
          <img src='http://lorempixel.com/48/48'/>
          <span>Menu Item 02</span>
        </a>

    </li>
    <li> <a href="/Home/Item03">
          <img src='http://lorempixel.com/48/48'/>
          <span>Menu Item 03</span>
        </a>

    </li>
</ul>
 
 CSS： 
 
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
}
ul#menu li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
}
ul#menu li a {
    background: none;
    color: #999;
    text-decoration: none;
    position:relative;
}
ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}
ul#menu li a img { display:block; margin:auto; } 
ul#menu li a span{position:absolute; top:0; text-align:center;}
Are you looking for something like this?
 
The HTML:
 
<ul id="menu">
    <li> <a href="/Home/Item01">
          <img src='http://lorempixel.com/48/48'/>
        <span>Menu Item 01</span>
        </a>

    </li>
    <li> <a href="/Home/Item02">
          <img src='http://lorempixel.com/48/48'/>
          <span>Menu Item 02</span>
        </a>

    </li>
    <li> <a href="/Home/Item03">
          <img src='http://lorempixel.com/48/48'/>
          <span>Menu Item 03</span>
        </a>

    </li>
</ul>
 
The CSS:
 
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
}
ul#menu li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
}
ul#menu li a {
    background: none;
    color: #999;
    text-decoration: none;
    position:relative;
}
ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}
ul#menu li a img { display:block; margin:auto; } 
ul#menu li a span{position:absolute; top:0; text-align:center;}