LOGO的垂直居中问题
来源：2-2 编程练习
沉木岩
2019-08-08 12:00:44
<!DOCTYPE html>
<html>
<head>
<title>2-2编程练习</title>
<style type="text/css">
*{
margin:0;
padding:0;
text-decoration:none;
}
.container{
width:1920px;
height:80px;
background:#000;
}
.container>a{
margin:0 200px;
/*这里的height:80px,line-height:80px;为什么不能让a标签里面的内容垂直居中*/
height:80px;
line-height:80px;
}
.container a{
float:left;
color:#fff;
}
nav{
height:72px;
line-height:72px;
float:right;
margin:0 200px;
}
nav a{
width:100px;
font-size:22px;
text-align:center;
display:block;
}
.container nav .Home{background:rgb(212,1,18);}
.container nav .Course{background:rgb(254,184,0);}
.container nav .Actual{background:rgb(120,185,23);}
.container nav .Plan{background:rgb(67,59,144);}
.container nav .FAQ{background:rgb(242,124,1);}
.container nav .Notes{background:rgb(1,127,203);}
.container nav a:hover,
.container nav a.active{
padding-bottom:8px;
}
</style>
</head>
<body>
<header>
<div class="container">
<a href="2-2编程练习.html"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png
" />MYMOOC</a>
<nav>
<a class="Home active" href="#">Home</a>
<a class="Course" href="#">Course</a>
<a class="Actual" href="#">Actual</a>
<a class="Plan" href="#">Plan</a>n
<a class="FAQ" href="#">FAQ</a>
<a class="Notes" href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
想请问老师，代码书写是否正确
还有一个疑问，为什么我的LOGO部分不用使用line-height进行垂直居中？
谢谢老师的解答！
1回答
-
好帮手慕码
2019-08-08
同学你好！
line-height是行高也叫做行间距，是用来设置两行文字文字之间的距离，而无法使图片居中。
所以这里的文字是实现了居中效果的：
如果想让图片居中可以通过计算，设置一定的边距
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题
回答 1