title: Centering icon with vertical-align in inline-block
body: <p>I don't understand why <code>vertical-align: middle</code> makes an icon not being centered, but a little lower.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="operatorscreen__buttons"&gt;
    &lt;li class="operatorscreen__single-button"&gt;
      &lt;a class="operatorscreen__link button-link button-block button-link_outline" href="#"&gt;First icon&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="operatorscreen__single-button"&gt;
      &lt;a class="operatorscreen__link button-link button-block button-link_outline" href="#"&gt;Second&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>scss:</p>
  
  <pre><code>.operatorscreen {
      &amp;__single-button {
        &amp;:first-child {
          margin-bottom: 10px;
        }
      }
  
      &amp;__link {
      color: black;
      text-decoration: none;
      font-size: 18px;
  
      &amp;:before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 20px;
        font-size: 100px;
        margin-right: 12px;
        vertical-align: middle;
        background-color: red;
      }
  
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/j414K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j414K.png" alt="enter image description here"></a></p>
  
  <p>As you can see, a red background is little lower than text, though it should be right in the center vertically.</p>