请问老师我这个是图片没有垂直居中显示还是文字没有垂直居中显示，可以的话如何让图片垂直居中？
来源：2-2 编程练习
慕先生8566359
2019-04-10 09:19:57
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 300px;
}
.header .logo img{
width: 200px;
height: 80px;
padding-left: 100px;
padding-top: 40px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
height: 300px;
line-height: 300px;
font-size: 15px;
font-weight: bolder;
width: 100px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/595dd5120001736902000080.png" >
</div>
<div class="nav">
<ul>
<li>前端</li>
<li>后端</li>
<li>移动端</li>
<li>数据库</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕码
2019-04-10
同学你好！
代码效果中是图片没有居中（可以给div加上一个背景色来便于观察）：
logo图片的高度是80px,整个div的高度是300px,所以设置margin-top:110px;（(300px-80px)/2）来垂直居中：
右侧的li链接建议使用text-align:center;使每个链接在li中居中显示:
如果帮助到了你欢迎采纳，祝学习愉快！
0
相似问题
回答 1
回答 2