Centering No Captcha reCaptcha

Question

After a few hours of research and trial and error, I was finally able to add the new Google No Capatcha re Capatcha to my form and get it working, but for some reason, it wo

Answer 1

What russianmario says does infact work, but instead of hard coding the 304px in you can just use the fit-content.

<style>
div.g-recaptcha {
  margin: 0 auto;
  width: fit-content;
}
</style>

<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>

Answer 2

This is similar to other answers, but I thought worth sharing. I don't like hard-coding values, but the width of the No Captcha reCAPTCHA appears to be 304px, so you could use that as your width:

<style>
div.g-recaptcha {
  margin: 0 auto;
  width: 304px;
}
</style>

<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>

This should center the reCAPTCHA exactly.

Answer 3

This CSS style works well for me.

.g-recaptcha > div:first-of-type {
    margin: 0 auto;
}

Answer 4

<style>
#capatcha {
margin: 0 auto;
display block;
}
</style>
<!-- reCapatcha -->
<div style="width: 100px; border: solid 1px;"
<div id="capatcha">
<div class="g-recaptcha" data-sitekey="">1234</div>
</div>
</div>    

tested on blank page works.

Answer 5

Edit: This answer is pretty much the worst one in the chain. Use some other one please.

Try adding

width: 50%;

to your css. I looked at another answer and it said that

display: block;

is for IE.

Answer 6

Use this style in your page:

<style>
   .g-recaptcha>div {margin: 0 auto;}
</style>