logo图.header-left设置浮动后如何设置垂直居中？

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
    <link rel="stylesheet" type="text/css" href="css/index.css">
	<title>Career Builder</title>
</head>
<body>
	<!-- 导航栏 -->
	<div class="header">
		<!-- 左边logo -->
		<div class="header-left">
			<img src="images/logo.png" alt="logo">
		</div>
		<!-- 右边导航目录 -->
		<div class="header-right">
			<a href="#1">HOME</a>
			<a href="#2">ABOUT</a>
			<a href="#3">GALLERY</a>
			<a href="#4">FACULTY</a>
			<a href="#5">EVENTS</a>
			<a href="#6">CONTACT</a>

		</div>
	</div>
	<!-- banner区 -->
	<div></div>
	<!-- about区 -->
	<div></div>
	<!-- GALLERY区 -->
	<div></div>
	<!-- 页脚区 -->
	<div></div>
</body>
</html>

CSS：

*{
	padding: 0;
	margin: 0;
}
.header{
	height: 80px;
	background-color: #07cbc9;
	width:100%;
}
a{
	text-decoration:none;
	color:white;
}
.header-right a{
	padding-right: 16px;
	line-height: 80px;
}
.header-left{
	float:left;
	height:80px;
	
}
.header-right{
	float:right;
}
.header-left img{
	line-height: 80px;

}

localhost999 2020-07-04

源自：项目：网页布局案例 2-10 作业题

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-07-04 13:47:45

同学你好，同学提供的这个方法是可以的呢。还有别的方法，例如定位什么的，但是没有同学的这个方法简单，所以同学使用这个就行了。

祝学习愉快~

收起回答

好帮手慕粉 2020-07-04 11:16:26

同学你好，在同学的代码中，图片的高度是等于父元素高度的：

父元素：

所以就可以看作已经实现垂直居中，不需要再设置了：

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

收起回答

提问者 localhost999 #1

老师，我使用的logo图高度不等于父元素高度，作业素材里面的那个logo图

2020-07-04 11:24:26
提问者 localhost999 #2

我现在使用下面这个代码发现可以垂直居中，老师这方法是否可行？有更好的方法吗？ .header-left{ float:left; margin-left: 80px; margin-top: 16px; }

2020-07-04 11:26:28