Bootstrap 4 Img与Span对齐需求：垂直居中+父容器右对齐

我来帮你搞定这两个布局需求，用Flexbox就能轻松实现，比你当前的inline-block方案更简洁可靠，具体修改如下：

最优解决方案（Flexbox） #

Flexbox是现代布局的首选方案，能同时满足垂直居中和靠右对齐两个需求，代码调整非常简单：

修改后的HTML #

<div class="row" style="display: flex; align-items: center; justify-content: flex-end;">
  <img src="thumbnails/americares.png" class="pl-2 pb-2">
  <span class="price">$20</span>
</div>

修改后的CSS #

.price {
  color: #29303b;
  font-size: 18px;
  font-weight: 600;
  margin-right: 10px;
  /* 移除了多余的padding-bottom，避免破坏垂直居中对齐 */
}

关键调整说明 #

• display: flex：把父容器转为弹性布局容器，让内部元素可以用Flex属性灵活控制位置
• align-items: center：强制所有子元素（img和span）在垂直方向上居中对齐，完美解决第一个需求
• justify-content: flex-end：让所有子元素整体向父容器右侧对齐，满足第二个需求
• 移除price类和inline样式中的padding-bottom：这些内边距会让span偏离垂直中线，Flex的居中机制已经足够实现对齐

备选方案（兼容旧浏览器） #

如果你需要兼容不支持Flexbox的旧浏览器，可以用vertical-align: middle来实现垂直居中，同时保留父容器的text-align: right实现靠右：

修改后的HTML #

<div class="row" style="text-align: right;">
  <img src="thumbnails/americares.png" class="pl-2 pb-2" style="vertical-align: middle;">
  <span class="price" style="vertical-align: middle;">$20</span>
</div>

修改后的CSS #

.price {
  color: #29303b;
  font-size: 18px;
  font-weight: 600;
  margin-right: 10px;
  padding-bottom: 0; /* 移除底部内边距 */
}

这个方案通过给img和span都设置vertical-align: middle来实现垂直居中，父容器的text-align: right让它们整体靠右，但Flex方案的可读性和扩展性更好，优先推荐前者。

内容的提问来源于stack exchange，提问作者Gustavo Costa