页脚版权文本与支付方式Logo定位问题求助

我需要实现版权文本显示在底部页脚左侧、支付方式Logo显示在底部页脚右侧的布局，但现有代码显示效果不符合预期，以下是原代码：

原HTML代码 #

<!--Footer Bottom-->
<div class="footer-bottom">
    <div class="auto-container">
        <div class="inner-container">
            <div class="copyright-text">&copy; All Right Reserved | 2023  <a href="#" style="color: #f4f5f7;">Digniverse.co</a></div>
            <!-- Payment Logos -->
            <div class="payment-methods">
               <img src="images/svgs/mastercard.svg" alt="mastercard">
               <img src="images/svgs/visacard.svg" alt="visa">
               <img src="images/svgs/paypal.svg" alt="paypal">
               <img src="images/svgs/bitcoin.svg" alt="bitcoin">
               <img src="images/svgs/zelle.svg" alt="zelle">
               <img src="images/svgs/cashapp.svg" alt="cashapp">
            </div>
        </div>
    </div>
</div>

原CSS代码 #

.footer-bottom {
  display: flex;
  justify-content: space-between;
}

.copyright-text {
  text-align: left;
  width: 50%;
}

.payment-methods {
  display: flex;
  justify-content: flex-end;
  width: 50%;
}

.payment-methods img {
  height: 30px;
  margin-left: 10px;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
  }

  .copyright-text,
  .payment-methods {
    width: 100%;
    text-align: center;
  }
  
  .payment-methods {
    justify-content: center;
  }
}

问题分析与修复代码 #

原代码核心问题是：flex布局被错误应用在.footer-bottom上，但需要左右分布的两个元素（copyright-text和payment-methods）是.inner-container的子元素，因此需调整flex属性的作用层级，修复后的CSS如下：

/* 让flex布局作用在正确的容器上 */
.footer-bottom .inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 可选：让元素垂直居中对齐 */
}

.copyright-text {
  text-align: left;
}

.payment-methods {
  display: flex;
  gap: 10px; /* 替代margin-left，更直观控制Logo间距 */
}

.payment-methods img {
  height: 30px;
}

@media (max-width: 768px) {
  .footer-bottom .inner-container {
    flex-direction: column;
    gap: 10px; /* 移动端增加元素垂直间距 */
  }

  .copyright-text,
  .payment-methods {
    width: 100%;
    text-align: center;
  }
  
  .payment-methods {
    justify-content: center;
  }
}

修复说明 #

• 将display: flex和justify-content: space-between从.footer-bottom转移到.inner-container，确保flex布局直接作用在需要左右分布的子元素上
• 移除两个子元素的width: 50%，space-between会自动分配剩余空间，无需强制宽度
• 用gap替代margin-left控制支付Logo间距，代码更简洁易维护
• 添加align-items: center让版权文本和支付Logo垂直居中（可根据视觉需求调整）
• 移动端调整.inner-container的flex方向为纵向，增加垂直间距优化显示

内容的提问来源于stack exchange，提问作者Van-Ess