居中无验证码 reCaptcha

Posted 2023-03-29

【中文标题】居中无验证码 reCaptcha

【英文标题】：Centering No Captcha reCaptcha

【发布时间】：2015-02-09 06:31:11

【问题描述】：

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

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


#capatcha 
    margin: 0 auto;
    display: block

【参考方案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>

【讨论】：

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

@NevilleDastur 刚刚用您的想法更新了 amswer。

这对我来说效果很好；简单得要命。谢谢;）如果你有一个自定义css，你也可以添加

【参考方案2】：

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

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

</style>

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

这应该使 reCAPTCHA 准确居中。

【讨论】：

this solution below is far better。原因请看@NevilleDastur 的评论（我同意他）。

【参考方案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;

【讨论】：

使用文本对齐：-ms-center;对我来说已经足够了，谢谢

【参考方案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 水平居中（指定 width=304px）。

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

</style>

【参考方案5】：

这种 CSS 样式很适合我。

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

【参考方案6】：

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

尝试添加

width: 50%;

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

display: block;

适用于 IE。

【讨论】：

感谢您的建议，width: 100% 对我没有任何帮助，但是当我尝试 50% 时，它非常接近我想要的位置，最终得到 75%

在所有答案中，这是最糟糕的。检查这个much better idea

@EvanCarroll 如果我的答案被接受与否，我无法更改。我知道这很糟糕。 1 1/2 年前回答了这个问题。现在我知道得更多了。

这可行，但不是响应式解决方案。将在不同的屏幕上失败。

【参考方案7】：

此代码将起作用。

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

【讨论】：

这不是有效的 HTML5。 align 早已被弃用。

【参考方案8】：

russianmario 所说的确实有效，但您可以使用 fit-content 来代替硬编码 304px。

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

</style>

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

【参考方案9】：

如果有人将 reCaptcha 与 Bootstrap 一起使用，您可以执行以下操作：

<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-centertext-align:center;

【参考方案10】：

通过将 reCaptcha 包装在 div 中并调整 padding-left 值直到我将 reCaptcha 居中，以下 css 非常适合我。

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

【参考方案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>

【参考方案12】：

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

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

【参考方案13】：

对于primefaces，您可以这样做：

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

---

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

【参考方案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>    

在空白页上测试有效。

【讨论】：

您实际上是在调用改变 .g-recaptcha 类的 javascript 吗？这个问题与抽象的 g-recaptcha 无关。这是关于谷歌推出的图书馆。