实现对吗，还有问题在注释中
来源：2-2 编程练习
localhost999
2020-07-03 11:34:04
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.header{
width:100%;
height:80px;
/*background:pink;*/
}
.header img{
float:left;
vertical-align:middle;
/*问题：这个logo居中设置对吗*/
}
.header li{
float:right;
list-style:none;
width:80px;
line-height:80px;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div>
<img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="logo">
</div>
<div>
<ul>
<li>数据库</li>
<li>移动端</li>
<li>后端</li>
<li>前端</li>
</ul>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，代码正确，只是头部缺少了边框，建议添加上，如下：
问题解答如下：
由于图片和导航高度一致，无法看出图片是否居中，因此将头部高度增大，发现图片没有实现居中，如下：
原因是没有给图片的父元素设置行高（vertical-align需要配合行高才会实现居中），另外给图片设置浮动后，会影响图片的居中，综上修改如下（只针对图片的修改）：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题