CSS 图像未在中心对齐

Question

I was trying to make a paypal button shown in this link: https://paypal.com/buttons/smart I tried in different ways but I could not put it in center properly. I just want that button to look like paypal button as if it was smart button.

<center><div class="paypal-button"><a href="www.google.com" class="pp"><img src="https://cdn3.iconfinder.com/data/icons/payment-method-1/64/_Paypal-39-512.png" width="64px"></a></div>
.paypal-button
{
text-align: center;
white-space: nowrap;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: none;
font-weight: 500;
font-size: 11px;
user-select: none;
transition: opacity 0.25s ease-in-out;
position: relative;
box-sizing: border-box;
border: none;
vertical-align: top;
cursor: pointer;
outline: none;
overflow: hidden;
background: #ffc439;
color: #111;
height: 35px;
min-height: 35px;
max-height: 55px;

 .paypal-button { text-align: center; white-space: nowrap; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; font-weight: 500; font-size: 11px; user-select: none; transition: opacity 0.25s ease-in-out; position: relative; box-sizing: border-box; border: none; vertical-align: top; cursor: pointer; outline: none; overflow: hidden; background: #ffc439; color: #111; height: 35px; min-height: 35px; max-height: 55px; border-radius: 4px; max-width: 400px; height: 55px; }

 <center><div class="paypal-button"><a href="www.google.com" class="pp"><img src="https://cdn3.iconfinder.com/data/icons/payment-method-1/64/_Paypal-39-512.png" width="64px"></a></div>

border-radius: 4px;
max-width: 400px;
height: 55px;
}

Answer 1

The issue is in the fact that the image you are trying to use has extra padding around the paypal text, so it was causing the text to look vertically uncentered. I uploaded the image to an online image editor and autocropped the extra transparent spacing away.

However, the content of your button still wasn't vertically centered with your default code so I changed your button to use display flex. This makes vertically and horizontally centering the image much easier with justify-content and align-items.

New image: https://i.imgur.com/509VUan.png

 .paypal-button { display: flex; justify-content: center; align-items: center; white-space: nowrap; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; font-weight: 500; font-size: 11px; user-select: none; transition: opacity 0.25s ease-in-out; position: relative; box-sizing: border-box; border: none; vertical-align: top; cursor: pointer; outline: none; overflow: hidden; background: #ffc439; color: #111; height: 35px; min-height: 35px; max-height: 55px; border-radius: 4px; max-width: 400px; height: 55px; }

 <center><div class="paypal-button"><a href="www.google.com" class="pp"><img src="https://i.imgur.com/509VUan.png" width="64px"></a></div>

Answer 2

Just add display: flex, justify-content: center, align-items: center. to make this image vertically and horizontally centered.

 .paypal-button { display: flex; justify-content: center; align-items: center; }