60

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 won't center. Any ideas?

<!-- reCapatcha -->
<div id="capatcha">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>


#capatcha {
    margin: 0 auto;
    display: block
}
Improve this question

14 Answers 14

Reset to default
144

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>
Improve this answer
3
  • 5
    I think this is a good answer as avoids the fixed values in styles. If used within a bootstrap context then apply .text-center to the surrounding column div and then just add the .g-recaptcha style to your custom css
    – NevilleDastur
    Aug 2, 2015 at 12:16
  • 1
    @NevilleDastur just updated the amswer with your idea.
    – Evan Carroll
    May 18, 2016 at 13:22
  • This ended working fine for me; simple as hell. Thanks ;) Also you may add the inside of <style> inside a custom css if you have one
    – defvs Daniel
    Nov 14, 2017 at 16:34
43

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.

Improve this answer
1
17

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;
}
Improve this answer
1
  • 1
    using text-align: -ms-center; was enough for me, thanks
    – Wrong
    Jun 8, 2019 at 12:22
13

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>
Improve this answer
0
8

This CSS style works well for me.

.g-recaptcha > div:first-of-type {
    margin: 0 auto;
}
Improve this answer
0
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.

Improve this answer
4
  • 1
    Thank you for the suggestion, width: 100% wasn't doing anything for me but when I tried 50% and it was pretty close to where I wanted it ended up with 75%
    – Jacko
    Dec 10, 2014 at 22:23
  • 2
    Out of all the answers, this is the worst. Check this one for a much better idea
    – Evan Carroll
    May 18, 2016 at 7:36
  • 1
    @EvanCarroll I can't change if my answer is accepted or not. I know it's bad. It was answered 1 1/2 years ago. Now I know better.
    – Blue
    May 18, 2016 at 10:22
  • this works but not it is not a responsive solution. will fail on different screens.
    – rameezmeans
    Jul 2, 2018 at 10:50
4

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>
Improve this answer
3

this code will be worked.

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

Improve this answer
1
  • 3
    It's not valid HTML5. align is long deprecated.
    – Evan Carroll
    May 18, 2016 at 0:15
0

If anyone is using reCaptcha with Bootstrap you can do the following:

<div class="text-center">
<div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-10">{{> reCAPTCHA}}</div>
    <div class="col-sm-1"></div>
</div>


.text-center{text-align:center;}
Improve this answer
0

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>
Improve this answer
0

With Bootstrap 4 you can easily do this by creating a div containing with a class of text-center. Then add to the g-recaptcha class tag d-inline-block

<div class="text-center"><div class="g-recaptcha d-inline-block" data-sitekey="your-site-key-here"></div></div>
Improve this answer
0

Use this style in your page:

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

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;
}
Improve this answer
-1 
<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.

Improve this answer
1
  • are you actually calling the javascript which mutates the .g-recaptcha class? This question isn't about g-recaptcha in the abstract. It's about the library google puts out.
    – Evan Carroll
    May 18, 2016 at 5:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.