How can I make the Apple store and Google play store badges align vertically?

Question

So I have the external links all set up, and the badges on the website, but the main problem I am currently experience is making these align vertically (the Google play badge is slightly moved to the right underneath the apple store) Downloadable badges alignment issue

Below is currently the code that I have set up for these two badges -- what exactly do I have to change to make the Google play badge align vertically with the Apple store badge? I feel like I have tried mostly everything, but am still very confused.

<a href="https://apps.apple.com/app/id1551353775" style="display: inline-block; overflow: hidden; border-radius: 40px; width: 150px; height: 90px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" alt="Download on the App Store" style="border-radius: 15px; width: 150px; height: 90px;"></a>
<a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'><img style="width:164px;margin-top:-30px;" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>

Edit: Not really sure why the code snippet is not showing them aligned with the Apple store on top and the Google play store on the bottom -- reference the screenshot for the correct orientation.

Answer 1

EDITED: ADDED A VERTICAL STACKING OPTION

TL;DR. Remove inline styles. Apply alignment styling to their parents.

See below for code snippet. Inline styles could make it very difficult to build a consistent definitions throughout and also likely difficult to debug.

Here, I've added a simple vertical alignment by adding flex and align-items to its parent. The images differ in their sizes and transparent margins around, which is simply addressed by their width in CSS.

.app-icons {
  display: flex;
  align-items: center;
}
.vertical {
  width: 300px;
  flex-direction: column;
}

.android {
  width: 150px;
}
.apple {
  width: 164px;
}

<h2>Vertical Stacked</h2>
<div class="app-icons vertical">
  <a href="https://apps.apple.com/app/id1551353775">
    <img 
      class="apple"
   src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" 
      alt="Download on the App Store">
  </a>
  <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'>
    <img 
      class="android" 
      alt='Get it on Google Play' 
      src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' />
  </a>
</div>

<h2>Horizontally Presented</h2>
<div class="app-icons">
  <a href="https://apps.apple.com/app/id1551353775">
    <img 
      class="apple"
      src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" 
      alt="Download on the App Store">
  </a>
  <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'>
    <img 
      class="android" 
      alt='Get it on Google Play' 
      src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' />
  </a>
</div>