4

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

有没有解决的办法？

4

4 回答 4

2

向图像添加一些 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;
}
于 2013-03-06T04:18:41.890 回答
1

我建议使用 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>
于 2013-03-06T04:23:09.763 回答
0

在下面更改您的html

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

并将其添加到您的CSS中

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

演示

于 2013-03-06T04:33:55.420 回答
0

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

您可以使用onerror="this.remove()"

这是小提琴http://jsfiddle.net/nuSLH/14/

于 2013-03-06T04:34:56.673 回答