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

来源：2-10 作业题

localhost999

2020-07-04 00:35:42

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;

}

写回答

2回答