Change height of single char inside a text in html/css

Question

I'm using an Unicode symbol (U+25C0) to make a "left arrow" on a button, but the symbol itself is shifted down a bit. I couldn't find a way to center it, I tried margins, padding and line-height with no success.

Here's what it looks like:

And the simple code:

h2 {
  font-family: Oswald;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">

<h2>
  <span style="font-size: 70%">&#9664</span>
  &nbsp;Return
</h2>

I just need to vertically center the symbol, if anyone could help me :)

Answer 1

You can add this to your CSS to center it vertically:

h2 {
  display: flex;
  align-items: center;
}

if you want to align it horizontally as well use justify-content: center;