CSS: Vertically aligning inline-block element in a line of text
<p>I have an inline-block element put inside a line of text:</p>

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

<p><code>.icon</code> element has <code>vertical-align: middle;</code>, which results in this picture:</p>

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

<p>As you can see, the icon is not aligned with the middle of the text, it is a little bit lower, whilst the text alignment looks OK. The <code>.button-content</code> has <code>line-height</code> equal to the height of the parent. I tried to wrap the text elements around the icon:</p>

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

<p>And got this result:</p>

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

<p>The coin went up a little relatively to the text, whereas the whole line went down a pixel or two.</p>

<p>What is the proper way to align an inline-block element inside a lign of text? And what are these text chunks and how do they behave? Do they have <code>display:inline;</code> or something, because I can't see their properties in the DevTools?</p>