没有Captcha reCaptcha

Question

经过几个小时的研究和反复试验后，我终于能够将新的google No Capatcha re Capatcha添加到我的表单中并使其正常工作但由于某种原因它不会让任何人有任何想法？

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


#capatcha {
    margin: 0 auto;
    display: block
}

Answer 1

我去了：

<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 2

这与其他答案类似，但我认为值得分享。我不喜欢硬编码值，但No Captcha reCAPTCHA的宽度似乎是304px，因此您可以将其用作宽度：

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

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

这应该完全集中在reCAPTCHA上。

Answer 3

我不喜欢在我的.scss中使用304px硬编码的想法

g-recaptcha html生成为：

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

这使第一个内部div（指定宽度= 304px）水平居中。

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

Answer 4

这个CSS适用于我：

user

Answer 5

这种CSS风格适合我。

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

Answer 6

编辑：这个答案几乎是链条中最糟糕的答案。请使用其他一些。

尝试添加

width: 50%;

给你的CSS。我看了另一个答案，并说它

display: block;

适用于IE。

Answer 7

此代码将有效。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 8

在页面中使用此样式
<style> .g-recaptcha>div {margin: 0 auto;} </style>

Answer 9

如果有人在Bootstrap中使用reCaptcha，则可以执行以下操作：

<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;}

Answer 10

以下css通过将reCaptcha包裹在一个div中并调整padding-left值直到我使reCaptcha居中，对我来说是完美的。

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

Answer 11

使用Bootstrap 4，您可以通过创建一个包含一类text-center的div轻松地做到这一点。然后将其添加到g-recaptcha类标签d-inline-block

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

Answer 12

您可以执行以下操作：

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

---

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

Answer 13

Russianmario所说的实际上是有效的，但是您可以使用fit-content来代替对304px进行硬编码。

in:

Answer 14

<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>    

在空白页面上测试。