如何使 Apple 商店和 Google Play 商店徽章垂直对齐？

Question

因此，我已经设置了所有外部链接以及网站上的徽章，但我目前遇到的主要问题是使这些徽章垂直对齐（Google Play 徽章稍微移动到苹果商店下方的右侧）可下载徽章对齐 问题

下面是我目前为这两个徽章设置的代码 - 我到底需要更改什么才能使 Google Play 徽章与 Apple Store 徽章垂直对齐？我觉得我已经尝试了几乎所有的方法，但仍然很困惑。

<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>

编辑：不太确定为什么代码片段没有显示它们与顶部的 Apple 商店和底部的 Google Play 商店对齐 - 请参考屏幕截图以获得正确的方向。

Answer 1

编辑：添加了垂直堆叠选项

TL；博士。删除内联样式。将对齐样式应用于其父母。

请参阅下面的代码片段。内联样式可能会使构建一致的定义变得非常困难，并且也可能难以调试。

在这里，我通过将flex和添加align-items到其父级来添加简单的垂直对齐。图像的大小和周围的透明边距不同，这可以通过widthCSS 简单地解决。

.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>