如何在图像附近的列表中将 "a" 垂直居中？

Question

如何使文本“PAYPAL”、“CREDIT CARD”和“CRYPTO”在图片附近垂直居中？

.payments-nav ol li {
  display: inline-block;
  background-color: red;
}

<div class="payments-nav">
  <ol class="payments-nav-links">
    <li class="paypal">
      <a href="paypal-shop.html"><img src="img/paypal.png" alt="paypal-img" class="paypal-img" />CREDIT CARD</a>
    </li>
    <li class="card">
      <a href="card-shop.html"><img src="img/credit-card.png" alt="creditcard-img" class="creditcard-img" />CREDIT CARD</a>
    </li>
    <li class="crypto">
      <a href="crypto-shop.html"><img src="img/crypto.png" alt="crypto-img" class="crypto-img" />CRYPTO</a>
    </li>
  </ol>
</div>

此处截图：

Answer 1

CSS:

.payments-nav-links li a {display: flex; align-items: center;}

如何在图像附近的列表中将 "a" 垂直居中？

How can I vertically center an "a" in a list near an image?

html

css

debugging

web

web-deployment