Search code examples
htmlcssdebuggingwebweb-deployment

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


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