4

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.

Avalanche29
  • 41
  • 1
  • 3
  • To put your mind at rest, I see misaligned buttons in the code snippet exactly as you describe. – Cutey from Cute Code Apr 01 '22 at 14:33
  • apple's `anchor` has `display: inline-block` inline css, while google's one hasn't. add the same style to the second link for correct display. – GrafiCode Apr 01 '22 at 14:35
  • To avoid redundant inline styles, you might want to consider adding styles to its parent level container. – Bumhan Yu Apr 01 '22 at 14:53
  • 1
    It's because the google play image already has white-space in it. Try `outline: 2px solid red` on image to see. You should download another one. – Servesh Chaturvedi Apr 01 '22 at 15:03
  • Does this answer your question? [Wrong vertical align of text in Google Chrome browser](https://stackoverflow.com/questions/29366908/wrong-vertical-align-of-text-in-google-chrome-browser) – Priya jain Apr 01 '22 at 15:07

2 Answers2

6

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>
user1634451
  • 5,133
  • 6
  • 30
  • 43
Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
  • Okay, but that still does not show the Apple store and Google play store badges aligning straight vertically, as it looks like the Google play badge is more aligned to the left. Is there not a way to get these two badges to align perfectly straight vertically? – Avalanche29 Apr 05 '22 at 15:18
  • So, you'd prefer to have the two graphics stacked vertically, but aligned to the left. It's a simple thing to achieve in CSS, but in this case you'll need to modify the graphic file itself. Your Google Play image has a transparent border around it, which makes it visually staggered if flushed left. Fix the image first. Remove the transparent border, and while at it consider making the two graphics match the dimensions. – Bumhan Yu Apr 05 '22 at 17:55
2

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" class="storeLink"><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' class="storeLink"><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>
Alexandre Macedo
  • 66
  • 2
  • 5