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.

CodePudding user response：

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 >
  <a href="https://apps.apple.com/app/id1551353775">
    <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">
  </a>
  <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'>
    <img 
       
      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 >
  <a href="https://apps.apple.com/app/id1551353775">
    <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">
  </a>
  <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'>
    <img 
       
      alt='Get it on Google Play' 
      src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' />
  </a>
</div>

CodePudding user response：

The problem is not about alignment, it happens that your Google Store image is a PNG with a transparent border around it. The border don't shows (because it is transparent), but use the space. You have to cut the border out using a image editing program like photoshop or Photopea Online Image Editor, but if absolutelly necessary to use the image as is on your code, copy and paste the snippet bellow to achive your result.

<style>
    .storeLink {
        position: relative;
        display: inline-block;
        width: 240px;
        height: 80px;
        border-radius: 16px;
        overflow: hidden;
        background-color: black;
    }
    .storeLink > img {
        --width: 100%;
        position: absolute;
        width: var(--width);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>

        <a href="https://apps.apple.com/app/id1551353775" ><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" ></a>
        <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages' ><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' style="--width: 128%";/></a>