title: Text is not vertically centered in the button (Bootstrap 4.4 Safari macOS)
body: <p><a href="https://i.stack.imgur.com/fNb5d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fNb5d.png" alt="text is not vertically centered (Bootstrap 4.4 Safari macOS)" /></a></p>
  <p>How can I fix this? I'm using Bootstrap 4.4, all button styles are default except:</p>
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap');
  
  .btn-action {
    border-radius: 1.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    text-transform: uppercase;
    font-weight: 500;
  }
  .btn-yellow {
    background-color: #ffd802;
    font-family: &quot;Roboto&quot;, sans-serif;
  }
  </code></pre>
  <p>The problem is only in Safari on macOS.
  HTML:</p>
  <pre><code>&lt;div class=&quot;text-center&quot;&gt;
    &lt;button class=&quot;btn btn-action btn-yellow&quot; type=&quot;button&quot;&gt;
      Read the Story
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>