How can I center multiple items inside a div vertically using CSS without using flexbox?

I've been looking all over the internet and I've stumbled upon very similar problems but the solutions I've found vary so slightly that they don't work. I'm trying to create a banner for a webpage that has all items vertically aligned to the center without using a flexbox.

I need to align the logo and the name to the left and some buttons to the right. All I need to do now is align them vertically. I created a minimal snippet just to show my problem.

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
}

.banner img {
  float: left;
  width: 40px;
  height: 40px;
}

.banner h1 {
  float: left;
}

.banner button {
  float: right;
  width: 80px;
  height: 40px;
}

<div class="banner">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"/>
  <h1>Title</h1>
  <button>Button 2</button>
  <button>Button 1</button>
</div>