居中显示无验证码reCaptcha

Question

经过几个小时的研究和反复尝试，我终于成功地将新的 Google 无验证码重新验证添加到我的表单中并使其正常工作，但由于某些原因，它无法居中。有什么建议吗？

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


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

- Jacko

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>

- jxmallett

---

我认为这是一个好答案，因为它避免了样式中的固定值。如果在Bootstrap上下文中使用，则将.text-center应用于周围的列div，然后只需将.g-recaptcha样式添加到您的自定义CSS中即可。 - NevilleDastur

@NevilleDastur刚刚更新了答案，加入了您的想法。 - Evan Carroll

这对我来说很好用，简单明了。谢谢；） 如果您有自定义的CSS，也可以将<style>内部添加到其中。 - defvs Daniel

Answer 2

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

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

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

这将确保reCAPTCHA居中显示。

- russianmario

---

以下解决方案比较好：https://dev59.com/Ul4c5IYBdhLWcg3w59uQ#29836372。原因请查看@NevilleDastur的评论（我同意他的观点）。 - Evan Carroll

Answer 3

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

- huckbit

---

使用 text-align: -ms-center; 对我来说已经足够了，谢谢。 - Wrong

Answer 4

我不喜欢在我的 .scss 文件中硬编码 304px 的想法。

g-recaptcha 的 HTML 生成方式如下：

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

这将水平居中第一个内部div（它指定了宽度为304像素）。

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

- Mike Causer

Answer 5

这个CSS样式对我来说很有效。

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

- Acrilix

Answer 6

编辑：在这一条里，这是最糟糕的答案。请使用其他答案。

尝试添加

width: 50%;

将其添加到您的CSS中。我查看了另一个答案，它说

display: block;

适用于IE浏览器。

- Blue

---

谢谢您的建议，宽度为100%对我没有任何作用，但当我尝试了50%时，它非常接近我想要的效果，最终使用了75%。 - Jacko

在所有的答案中，这是最糟糕的一个。点击这个链接，可以看到一个更好的想法。 - Evan Carroll

@EvanCarroll 我无法更改我的答案是否被接受。我知道这很糟糕。它是1年半前回答的。现在我知道得更好了。 - Blue

这个可以工作，但不是一个响应式的解决方案。在不同的屏幕上会失败。 - rameezmeans

Answer 7

俄罗斯马力欧说的确实可行，但是你可以使用 fit-content 而不是硬编码 304px。

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

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

- dan joe

Answer 8

这段代码将被执行。

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

- chodaict

---

这不是有效的HTML5代码，align属性早已经过时。 - Evan Carroll

Answer 9

请在您的页面中使用以下样式：

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

- PurTahan

Answer 10

如果有人正在使用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;}

- Nathan Parrott