Vertical aligning a <span> text in a header in React : <p>I have a react header component that looks like this:</p>

<pre><code>const Header = () =&gt; {
    return (
        &lt;div className="navbar"&gt;
            &lt;div className="logo-container"&gt;
                &lt;img id='logo' alt='header-logo' src={Logo}/&gt;&lt;span id="header-title"&gt;Dashboard&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );
}

export default Header;
</code></pre>

<p>The stylesheet for this component looks like</p>

<pre><code>.navbar {
    height: 4em;
    background-color: #f9f9f9;
    width: 100%;
    background: #00bceb;
  }

  #logo {
    margin-left: 2em
  }

  #header-title {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    color: #f9f9f9;
  }
</code></pre>

<p><a href="https://i.stack.imgur.com/VpGf3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VpGf3.png" alt="enter image description here"></a></p>

<p>(I'm hiding the logo)</p>

<p>The text is not middle aligned.</p>

<p>Any help?</p>
