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

Answer 2

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

更改此位置以添加位置：relative ...

#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>

Answer 3

更改您的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;
}

demo

Answer 4

img标签的大小变得更大，因为找不到请求的img。我的建议是，如果请求img not found

，请删除img
您可以使用onerror="this.remove()"

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

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

4 个答案: