经过几个小时的研究和反复尝试,我终于成功地将新的 Google 无验证码重新验证添加到我的表单中并使其正常工作,但由于某些原因,它无法居中。有什么建议吗?
<!-- reCapatcha -->
<div id="capatcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
#capatcha {
margin: 0 auto;
display: block
}
我和谁一起去了:
<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>
这与其他答案类似,但我认为值得分享。我不喜欢硬编码数值,但是No Captcha reCAPTCHA的宽度似乎为304像素,因此您可以将其用作您的宽度:
<style>
div.g-recaptcha {
margin: 0 auto;
width: 304px;
}
</style>
<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>
这将确保reCAPTCHA居中显示。
这个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;
}
我不喜欢在我的 .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>
.g-recaptcha > div:first-of-type {
margin: 0 auto;
}
编辑:在这一条里,这是最糟糕的答案。请使用其他答案。
尝试添加
width: 50%;
将其添加到您的CSS中。我查看了另一个答案,它说
display: block;
适用于IE浏览器。
<style>
div.g-recaptcha {
margin: 0 auto;
width: fit-content;
}
</style>
<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>
<div align="center" class="g-recaptcha" data-sitekey="your key code"></div>
<style>
.g-recaptcha>div {margin: 0 auto;}
</style>
<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;}
.text-center
应用于周围的列div,然后只需将.g-recaptcha
样式添加到您的自定义CSS中即可。 - NevilleDastur