How can I vertically center the text "PAYPAL" "CREDIT CARD" and "CRYPTO" near the image?
.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>screenshot here:
>Solution :
CSS:
.payments-nav-links li a {display: flex; align-items: center;}