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

我正在尝试在导航栏上将图像与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>

---

是否存在此问题？

在图像中添加一些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;
}

---

我建议使用css类和：before，而不是放入图像，因为它是演示，对内容并不重要

将此更改为添加位置：相对

#menu li {
    float: left;
    position: relative;
}

然后像这样的事情。。。可能需要在li中添加一些填充

.icon-home:before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background: url(http://i.imgur.com/1CRy2G5.png);
    width: 24px;
    height: 24px;
}

要添加类

    <li><a class="icon-home" href="#">Home</a></li>

在下面更改您的html

<div id="menu">
            <ul>
                <li><a class="home" href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

---

由于未找到请求的img，img标记的大小变大。我的建议是，如果请求的img未找到，如何删除该img

您可以使用

onerror=“this.remove（）”

---

这是提琴

你可能想稍微调整一下，但它给出了一个大致的想法。我该如何为图像添加css类？我现在明白了，在计算出填充后，填充应该是好的。感谢您的图像缺少必需的

alt

属性。请参阅“”中的一个，这是WebAIM上的一篇非常好的文章：如果您确实使用了

alt

属性，在这种情况下，我会将其保留为空。因为最合乎逻辑的替代文本是“Home”，屏幕阅读器在浏览菜单时会读到“Home Home”，这一定很烦人。编辑：不过我不会在这里使用

img

。表示图形属于CSS。

#menu a.home {
    padding: 4px 20px 9px 30px;
    background-image: url(http://i.imgur.com/1CRy2G5.png);
     background-repeat:no-repeat;
}