Unable to center Patreon button on Wordpress site


#1

I have a Patreon button displayed in a sidebar widget on my Wordpress site and I cannot get it to centre-align (see below).

I’ve read the other posts on this topic. Its code is in a div with centre-align coding, and I have also tried creating its own div with centre-align coding just for it, but neither has worked. It remains left-aligned.

Any ideas?


#2

Looks like Patreon have updated the widget, which has changed the way it is displayed, which in turn has caused any existing style changes (like alignment) to no longer function as expected.

The new widget is explicitly configured to be wider than the old widget, which is as wide as your parent element, so although technically it is centered, it’s wide enough that you can’t tell. You’ll need to explicitly set the width of the widget to its actual width (178px, or smaller), and then it’ll appear centered if the parent element has text-align set to center.

You can do this by adding the following style:

.patreon-widget {
  width: 178px !important;
}

You can either add this to your website’s stylesheet (if you know how) or you can do it in the HTML like so:

<style type="text/css">
  .patreon-widget {
    width: 178px !important;
  }
</style>
<div style="text-align: center;">
  <!-- Put your Patreon button code here! -->
</div>

That will produce the following:


How to centre the Patreon button (WordPress)?
#3

Worked like a charm. Thanks!


#4

Are you using Patreon Button, Widgets & Plugin by CodeBard?


#5

Worked perfectly, thanks so much!