Как выровнять картинку по центру вертикали?

Question

[Имя Имечко]

<div class="head">
	<div class="header">
		<div class="logo">Сайт</div>
		<div class="profile"><img src="/system/img/profile.png"></div>
		<div class="menu"><img src="/system/img/menu.png"></div>
		<div class="services"><img src="/system/img/services.png"></div>
	</div>
</div>

.head {
	height: 80px;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}

.header {
	height: 80px;
	width: 1200px;
	margin: 0 auto;
}

.logo {
	float: left;
	font-size: 42px;
	line-height: 80px;
}

.services {
	float: right;
	padding: 5px;
}

.menu {
	float: right;
	padding: 5px;
}

.profile {
	float: right;
	padding: 5px;
}

Как сделать дивы с классами profile, menu, services выравненными по центру вертикали?
line-height не помогает.

Answer 1

[Maks]

Вариант 1:
https://jsfiddle.net/j5ak7nng/

Вариант 2:
https://jsfiddle.net/j5ak7nng/1/

Answer 2

[Александр]

Используйте flexbox

Answer 3

[Faber Estello]

profile, menu, services
{
line-height: 80px;
padding: 0;
}

profile > img, menu > img, services > img {
vertival-align: middle;
}

Comments

[Имя Имечко]

не помогло

Answer 4

[Андрей Федоров]

У вас блоки, которые вы хотите выровнять имеют свойства float, следовательно они не наследуют свойства родителя в отношении положения элементов и размеров. Замените float на display: inline-block и все получится. Размеры рассчитаете сами...