Netlify injected reCaptcha aligning

Hello

I’ve set up HTML form and it is very well handled by Netlify! cheers
I’m using Netlify injected reCaptcha for spam filtering but i’m not able to align the reCaptcha to center.
I used .className{ text-align: center;} but it seems not to take the styling i give

is there any fix to this?

Thanks in advance

Website or repo to test this on?

1 Like

Check this website on desktop view

It’s easy.

You’ve a <div> inside <div class = "g-recaptcha">. Add a margin: auto to that inner <div> and it’s done.

the div class=g-recaptcha is injected by netlify data-netlify-recaptcha attribute and i have no control it, correct me if im wrong

I have only done this
<div class="recaptcha" data-netlify-recaptcha="true"></div>
<style> .recaptcha{ margin: auto; } </style>

I also tried inline styling but itseems that The netlify pushes the styling to some width and margin attribute creating a <div > with class:g-recaptcha

You just need to add the following to your CSS file:

.g-recaptcha div:first-child
  {
    margin: auto;
  }

Then it won’t matter how it’s inserted in the DOM, as long as the stylesheet has loaded, it will work.