html - 导航栏中的 CSS 图像推送文本

Question

我正在尝试将导航栏上的图像与 CSS 对齐。即使我调整图像大小，它仍然会向下推文本。

我的 div html 代码是:

<div id="menu">
    <ul>
        <li><a href="#"><img src='images/tphome.png' border='0' width='24' height='24'> Home</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

http://jsfiddle.net/nuSLH/

这附近有什么地方吗？

Answer 1

向图像添加一些 css 可以强制文本与图像顶部对齐:

#menu img { vertical-align: top;}

或中间:

#menu img {vertical-align: middle;}

另一种选择是在 a 标签上使用背景图像并结合一些填充:

#menu a {
    background: url('http://i.imgur.com/1CRy2G5.png') no-repeat left center; 
    padding-left: 30px; padding-top: 5px;
}