header问题：a中加上img后文字无法对齐

最新推荐文章于 2021-05-08 17:46:39 发布

南太平洋_99

最新推荐文章于 2021-05-08 17:46:39 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS学习笔记

本文链接：https://blog.youkuaiyun.com/heyue_99/article/details/54783450

CSS学习笔记专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种解决网页导航栏中图标与文字无法对齐的方法，通过使用背景图片并设置适当的内边距来确保图标和文字在链接标签内正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：header中导航中有首页游戏视频。。。。 a标签中加上img文字无法对齐。

解决方法：

                    <ul class="headerNav">
			    <li><a href="#" class="home">首页</a></li>
			    <li><a href="#" class="video">视频</a></li>
			    <li><a href="#" class="found">发现</a></li>
			    <li><a href="#" class="game">游戏</a></li>
			    <li><a href="#" class="me">黎泰院小绅士m..</a></li>
		    </ul>

              a{
     			display: inline-block;
     			padding-left: 26px; //留padding-left给img
     		}

     		.home{
     			background: url(../img/home.jpg) left center no-repeat;
     		}
     		.video{
     			background: url(../img/video.jpg) left center no-repeat;
     		}
     		.found{
     			background: url(../img/found.jpg) left center no-repeat;
     		}
     		.game{
     			background: url(../img/game.jpg) left center no-repeat;
     		}
     		.me{
     			background: url(../img/me.jpg) left center no-repeat;
     		}

padding-left:26px;