logo垂直居中问题
来源：2-2 编程练习
慕粉1149105846
2020-01-17 14:00:22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.contain{
width:1000px;
margin 0 auto;
}
.header{
width:100%;
height:100px;
border:1px solid #000;
}
.logo{
float:left;
height:100px;
line-height:100px;
}
.header .logo img{
height:85px;
padding-left:50px;
}
.nav{
float:right;
margin-right:50px;
}
.nav ul li{
list-style:none;
float:left;
height:100px;
line-height:100px;
padding-left:50px;
font-size:15px;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<div class="contain">
<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>
</div>
</body>
</html>
我设置了 .nav height:100px line-height:100px 图片为什么不能垂直居中呢
1回答
-
好帮手慕粉
2020-01-17
同学你好，因为同学没有给图片设置vertical-align: middle属性，参考：
其实不建议同学使用这个方法实现图片的垂直居中，因为图片是内联元素，底部默认存在间隙，所以即使设置了也不能完全垂直居中：
可以将图片设置为block块，去除底部默认间隙，再通过计算外边距来实现：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
