怎么实现logo图片和右边文字垂直居中啊？

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/career.css">
	<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
	<div class="header">
		<div class="logo">
			<img src="images/logo.png">
		</div>
		<div class="menu">
			<ul>
        		<li><a href="#">HOME</a></li>
        		<li><a href="#">ABOUT</a></li>
        		<li><a href="#">GALLERY</a></li>
        		<li><a href="#">FACULITY</a></li>
        		<li><a href="#">EVENTS</a></li>
        		<li><a href="#">CONTACT</a></li>
        	</ul>
        </div>
	</div>


    <div class="content">
    	<div class="banner"></div>
    	<div class="ABOUT"></div>
    	<div class="GALLERY"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

.header{
	background-color:#aaa111;
	height:80px;
	line-height:80px;
	width:100%;
}

.header .logo{
	float:left;
	position:relative;
	left:100px;
}
.header .menu{
	float:right;
/*	position:relative;*/
}
.header .menu ul li{
	float:left;
	margin-right:10px;
	margin-top:0px;
	list-style:none;
}

视频里说把height和line-height的大小设置成一样的，就能垂直居中，不管用啊。

还有怎么能获取logo图片里背景颜色的十六进制数值？

还有怎么让右边的文字变成白色，还有字体怎么变成效果图里那种字体？

电磁护盾 2020-01-09

源自：前端油画商城案例 4-3 项目作业