为什么上面用了同样line-height，没有作用
来源：3-4 编程练习
相见甚欢
2018-10-22 22:42:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
html{
margin: 0px;
}
body{
margin: 50px;
width: 1500px;
}
#header{
height: 400px;
background-color: lightblue;
line-height: 400px;
}
#footer{
height: 200px;
background-color: lightcoral;
line-height: 200px;
}
#i1{
height: 100%;
text-align: center;
width: 50%;
float: left;
}
#i3{
width: 33%;
height: 100%;
text-align: center;
float: left;
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="header">
<div id="i1"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"></div>
<div id="i1"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"></div>
</div>
<div id="footer">
<div id="i3"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"></div>
<div id="i3"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"></div>
<div id="i3"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"></div>
</div>
</body>
</html>
同样是用line-height，为啥上面的图片没有反应呢？
求助教老师解答，谢谢
1回答
-
您好，其实是垂直居中了，但是由于是图片的底部居中，图片又比较大，所以会看起来没有变化。可以把header的高度设置的大一些，就能看到图片是垂直居中的状态。祝学习愉快！
0
相似问题