html - 将文本与图标对齐

Question

请帮助我垂直对齐图标和文本

HTML

<div id="opretForum">
   <ul>
      <li><a href="/opret-forum/">Opret Forum</a></li>
   </ul>
</div>

CSS

#opretForum li {
    list-style-image: url('/img/forum/tilfoj.png');
}

#opretForum ul {
    list-style-position: inside;
}

Answer 1

据我所知，无法对齐列表样式图像。常用的方法如下：

http://jsfiddle.net/fcPNp/

li {
  background: url('/img/forum/tilfoj.png') no-repeat left center;
  padding: 3px 0px 3px 20px;
  list-style: none;
}

Answer 2

像这样的东西应该工作：

<style>
#opretForum li { list-style:none; background:url('/img/forum/tilfoj.png');vertical-align:middle }
</style>

<div id="opretForum">
     <ul>
         <li><a href="/opret-forum/">Opret Forum</a></li>
     </ul>
</div>