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

The following css worked perfectly for me by wrapping the reCaptcha in a div and adjusting the padding-left value until I got the reCaptcha centered.

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

Answer 2

this code will be worked.

<div align="center" class="g-recaptcha" data-sitekey="your key code"></div>

Answer 3

I went with:

<style>
    /* already defined in bootstrap4 */
    .text-xs-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>
<div class="text-xs-center">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>

Answer 4

for primefaces you can do:

<div class="text-center captcha">
     <p:captcha label="Captcha" size="100%"/>
</div>

---

.captcha>div>div{
    text-align: center !important;
    margin: 0 auto !important;
}

Answer 5

I don't like the idea of hardcoding 304px in my .scss

The g-recaptcha html is generated as:

<div class="g-recaptcha" ... >
  <div style="width: 304px; height: 78px;">
    <div>
      <iframe ... ></iframe>
    </div>
    <textarea ... ></textarea>
  </div>
</div>

This horizontally centres the first inner div (which specifies width=304px).

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

Answer 6

This css works fine for me:

.g-recaptcha{
   margin: 15px auto !important;
   width: auto !important;
   height: auto !important;
   text-align: -webkit-center;
   text-align: -moz-center;
   text-align: -o-center;
   text-align: -ms-center;
}