title: Bootstrap 4: Vertical align image in a circle button
body: <p>I have a circle button that needs to have a plus image in the center of it. The thing is, I can't seem to vertical align that image without resorting to messing with margins. </p>
  
  <p>Is there an easier, Bootstrap-y way of doing this?</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-circle {
    background-color: blue;
    height: 60px;
    width: 60px;
    border-radius: 50%;
  }
  
  /* the button is supposed to be a circle, but for some reason it's not showing up like that in this snippet */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;a class="btn btn-circle mr-3" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&gt;&lt;img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" height="20"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>