Centre position web button

[mrneilypops]

Hi,
Probably a very simple answer to this question.
I am trying to centre a web button on Chevereto. [patreon]
I have tried various html commands however the button is always 'off centre'



Any help much appreciated.

<a href="https://www.patreon.com/bePatron?u=9282609" data-patreon-widget-type="become-patron-button">Become a Patron! </a><script async
src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>

Share your linux scrots

 

[tomsit]

You could try to use a parent center-box class.

- What is your google page speed score if I may ask?

 

[mrneilypops]

@tomsit
Thank you for taking the time to reply.

1. 'center-box class'...hmm...I tried <center></center> and <div class="center-div"></div>
...that is about the sum total of my html/css skills....

2.I have no idea what my google page speed score is.
How do I find out?

 

[tomsit]

try pack it in

<div class="center-box">
    Your move

</div>

Just look in the code from an inspection tool (chrome-> inspect) and get familiar with it, you'll soon notice it's easier to just use what's already there instead of inventing the wheel over again.

 

[mmybaka]

<div class="home-buttons">
<a href="#" class="btn btn-big white outline">text</a>
</div>

 

[mrneilypops]

<div class="center-box">
<a href="https://www.patreon.com/bePatron?u=9282609" data-patreon-widget-type="become-patron-button">Become a Patron! </a><script async
src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
</div>

Button is still not centered in banner block.
Any help welcome.

https://scrot.moe

 

[tomsit]

Hmm, messy stuff. You can just add a margin-left to the class <div class="_2KV-widgets-shared--patreonWidgetWrapper" style="margin-left:20%">

 

[mrneilypops]

@tomsit Thank you for the help.

<div class="_2KV-widgets-shared--patreonWidgetWrapper" style="margin-left:8%">

The above seems to be the best fix @1920x1080...but this does not hold as I adjust browser size...

 

[tomsit]

Yeah, you should make it responsive. If you don't figure it out I can help you out later when I have more time

 

[mrneilypops]

@tomsit
Thanks...take your time...I appreciate your expertise.

 

[tomsit]

<div class="_2KV-widgets-shared--patreonWidgetWrapper" style="margin:auto">

Then edit the width of the button to 175px

title="Patreon Widget" style="position: relative;visibility: visible;width: 175px;height: 36px;"></iframe>

Looks good on my end

 

[Rodolfo]

You can achieve CSS centering using lots of different techiches:

• Flex center
• margin-left: auto; margin-right: auto;
• position: relative; left: 50%; margin-left: -half;
• <center>uh</center>
• etc

Check this https://css-tricks.com/centering-css-complete-guide/

 

[mrneilypops]

@tomsit Thanks for your patience.
I have the first code part installed.
Where do I put;

title="Patreon Widget" style="position: relative;visibility: visible;width: 175px;height: 36px;"></iframe>

 

[tomsit]

@tomsit Thanks for your patience.
I have the first code part installed.
Where do I put;

title="Patreon Widget" style="position: relative;visibility: visible;width: 175px;height: 36px;"></iframe>

It's in your script code, I have no idea where you can edit that, either from the script provider or where you put that code, in banners maybe?