title: Vertical Alignment of SVG in CSS
body: <p>I have a problem with inline SVG alignment. I have created a button with some text and an SVG. And while the alignment works correctly when the SVG is at least as big as the text it fails when the SVG height is smaller than the text.</p>
  
  <p>I have created a test case with a two-colored background button to indicate where exactly the middle is. You can see if you look closer that the second case is not perfectly aligned because the height of the SVG is less than the one from the text.</p>
  
  <p>Is there any way to fix this? Doing it some other way (no js please)?</p>
  
  <p>Test case: <a href="https://goo.gl/KYDKGH" rel="noreferrer">https://goo.gl/KYDKGH</a></p>