没有Captcha reCaptcha

Question

经过几个小时的研究和反复试验，我终于能够将新的Google No Capatcha和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

使用Bootstrap 4，您可以通过创建包含一类文本中心的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 3

在您的页面中使用此样式：

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

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>    

在空白页上测试工作。

Answer 5

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

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

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

这应该完全集中在reCAPTCHA中心。

Answer 6

这个CSS适合我：

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

Answer 7

我不喜欢在我的.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 8

这种CSS风格对我很有用。

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

Answer 9

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

尝试添加

width: 50%;

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

display: block;

适用于IE。

Answer 10

这段代码将会有效。

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

Answer 11

如果有人在引导程序中使用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 12

通过将reCaptcha包装在div中并调整padding-left值直到我将reCaptcha置于中心位置，以下css对我来说非常合适。

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