How to align an image vertically to the center?

Question

css

<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;
}

How to make divs with profile, menu, services classes vertically aligned?
line-height doesn't help.

Answer 1

Use flexbox

Answer 2

profile, menu, services
{
line-height: 80px;
padding: 0;
}
profile > img, menu > img, services > img {
vertival-align: middle;
}

Answer 3

You have blocks that you want to align that have float properties, so they don't inherit their parent's properties in terms of element positions and sizes. Replace float with display: inline-block and you should be fine. Calculate your own dimensions...