html - 在列表项菜单链接上显示图像

Question

我需要一个跨浏览器解决方案来让列表项菜单链接与图像。我正在使用默认的 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，所以任何帮助将不胜感激。:)

Answer 1

尝试这个：

ul.menu li{
    background: url(images/<image-name>.gif) no-repeat;
    list-style:none;
    padding-left:4%;
    margin-top:1%;
}

Answer 2

你在寻找这样的东西吗？

的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;}