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

这是一个 fiddle :http://jsfiddle.net/EY3ad/

我希望每张图片都位于文本上方并集中显示。多年来我没有做过纯 HTML 和 CSS，所以任何帮助将不胜感激。 :)

Answer 1

你在找类似 this 的东西吗？ ？

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