如何在图像附近的列表中将 "a" 垂直居中?
How can I vertically center an "a" in a list near an image?
如何使文本“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>
此处截图:
CSS:
.payments-nav-links li a {display: flex; align-items: center;}
如何使文本“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>
此处截图:
CSS:
.payments-nav-links li a {display: flex; align-items: center;}