How to center Paypal button in Wordpress

fromrachel

Member
Joined
Dec 14, 2013
Messages
231
Points
18
I am setting up a Wp single page and generated a Paypal button, I have codes from Paypal and inserted on the page. But the problem is although its centered in Wordpress editor but when viewing on my browser it still shows the buttons on the left hand side. Is there an html code I'm missing or something to make Paypal button center on my WordPress page?
 

Rob Whisonant

Moderator
Joined
May 24, 2016
Messages
2,487
Points
113
Try inserting the PayPal code in between center tags...

<center>
</center>

Do this in view source mode.
 

AMVXT

New member
Joined
Mar 13, 2017
Messages
8
Points
0
CSS is your friend.
Use the browser's Inspect function to find the element in page source.
Use "margin: auto" on the button element, or "text-align: center" on the div containing the button.
With CSS you can also easily control the padding (space around the element) and many other things.

CSS is easy to learn, very powerful and extremely useful!
Styling in html works too, but it is so 1998 :) Every webmaster should know and be able to use basic CSS! :) The best way to learn it is to start with simple things, like centering.
 

harrygreen90

Active member
Joined
Dec 17, 2013
Messages
413
Points
28
I am setting up a Wp single page and generated a Paypal button, I have codes from Paypal and inserted on the page. But the problem is although its centered in Wordpress editor but when viewing on my browser it still shows the buttons on the left hand side. Is there an html code I'm missing or something to make Paypal button center on my WordPress page?
Wordpress editor can remove any HTML tags after you edited your posts. Note on that!

There are a few way to center Paypal button in Wordpress as following.

Adding

<center></center> around your Paypal button.

Creating a div with this code: <div style="text-align:center;">Your Paypal button</div> or <div style="margin: 0px auto;">Your Paypal button</div>

You can replace style="" with a class="" into a CSS file to make your code more professional.


Hope that helped.
 

MattCarson

New member
Joined
Jan 21, 2018
Messages
5
Points
0
Hey there! PayPal gives you the HTML code that you can use your web page so that you can start receiving online payments. By default, this code produces a button which places at left-side on your page. you can center the button yourself with some CSS code. The CSS code can change the PayPal button, centering it on the page without changing its functionality.
/* center Paypal button */
input.wpedon_paypalbuttonimage {
display: block;
margin: 0 auto;
}
 
  • Like
Reactions: PMonroe

ariennem

New member
Joined
Dec 15, 2019
Messages
7
Points
0
ariennem
This will not work!

You must add !important to the CSS code

/* center Paypal button */
input.wpedon_paypalbuttonimage {
display: block;
margin: 0 auto!important;
}
 

Rob Whisonant

Moderator
Joined
May 24, 2016
Messages
2,487
Points
113
Rob Whisonant
The only time you need !important is if you have a css conflict and have to override another css declaration. It's better to design css so you don't need to use !important at all.

Most likely in the paypal button case it would not be needed.
 
Newer threads
Replies
6
Views
4,139
Replies
5
Views
18,409
Replies
14
Views
5,608
Replies
6
Views
3,762
Recommended threads
Replies
2
Views
3,183
Replies
7
Views
1,134
Replies
7
Views
1,473
Replies
5
Views
3,090

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top