Why vertical alignment is applied to outer text? : <p>Whey the <code>vertical-align: middle</code> is applied to outer text and not to the text inside <code>div.code</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.code {
display: inline-flex;
border: 3px solid black;
height: 2.2rem;
text-align: center;
vertical-align: middle;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  code
  &lt;div class="code"&gt;380805&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
