HTML Vertically Center h1

Question

I have this html that contains two inline divs:

HTML

div.inline {
  display: inline-block;
}

<div class="inline">
  <img src="http://via.placeholder.com/350x150" />
</div>

<div class="inline">
  <h1 class="title"> TOPIC </h1>
</div>

The image and the h1 are shown correctly side by side. Now i would like the h1 to be vertically centered. It should be somthing like this

+----------+
|          |
|   IMG    |    TOPIC 
|          |
+----------+

How do i do this?

Answer 1

you can use flex

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
    <div class="inline">
		<img src="http://via.placeholder.com/350x150" />
    </div>

	<div class="inline">
		<h1 class="title"> TOPIC </h1>
	</div>
</div>

for reference: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/