CSS 居中 无验证码 reCaptcha
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27411581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering No Captcha reCaptcha
提问by Hymano
After a few hours of research and trial and error, I was finally able to add the new Google No Capatcha re Capatcha to my form and get it working, but for some reason, it won't center. Any ideas?
经过几个小时的研究和反复试验，我终于能够将新的 Google No Capatcha re Capatcha 添加到我的表单中并使其工作，但由于某种原因，它不会居中。有任何想法吗？
<!-- reCapatcha -->
<div id="capatcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
#capatcha {
margin: 0 auto;
display: block
}
回答by jxmallett
I went with:
我去了：
<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>
回答by russianmario
This is similar to other answers, but I thought worth sharing. I don't like hard-coding values, but the width of the No Captcha reCAPTCHA appears to be 304px, so you could use that as your width:
这与其他答案类似，但我认为值得分享。我不喜欢硬编码值，但 No Captcha reCAPTCHA 的宽度似乎是 304px，因此您可以将其用作宽度：
<style>
div.g-recaptcha {
margin: 0 auto;
width: 304px;
}
</style>
<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>
This should center the reCAPTCHA exactly.
这应该准确地将 reCAPTCHA 居中。
回答by huckbit
This css works fine for me:
这个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;
}
回答by Mike Causer
I don't like the idea of hardcoding 304pxin my .scss
我不喜欢304px在我的 .scss中硬编码的想法
The g-recaptcha html is generated as:
g-recaptcha html 生成为：
<div class="g-recaptcha" ... >
<div style="width: 304px; height: 78px;">
<div>
<iframe ... ></iframe>
</div>
<textarea ... ></textarea>
</div>
</div>
This horizontally centres the first inner div (which specifies width=304px).
这将水平居中第一个内部 div（指定 width=304px）。
<style>
.g-recaptcha > div {
margin: 0 auto;
}
</style>
回答by Acrilix
This CSS style works well for me.
这种 CSS 样式很适合我。
.g-recaptcha > div:first-of-type {
margin: 0 auto;
}
回答by Blue
Edit: This answer is pretty much the worst one in the chain. Use some other one please.
编辑：这个答案几乎是链中最糟糕的一个。请使用其他的。
Try adding
尝试添加
width: 50%;
to your css. I looked at another answer and it said that
到你的CSS。我看了另一个答案，它说
display: block;
is for IE.
是为IE。
回答by chodaict
this code will be worked.
此代码将起作用。
<div align="center" class="g-recaptcha" data-sitekey="your key code"></div>回答by PurTahan
Use this style in your page:
在您的页面中使用此样式：
<style>
.g-recaptcha>div {margin: 0 auto;}
</style>
回答by Nathan Parrott
If anyone is using reCaptcha with Bootstrap you can do the following:
如果有人在 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;}
回答by Ivan
The following css worked perfectly for me by wrapping the reCaptcha in a div and adjusting the padding-left value until I got the reCaptcha centered.
通过将 reCaptcha 包装在 div 中并调整 padding-left 值，直到我将 reCaptcha 居中，以下 css 对我来说非常有效。
<style>
.g-recaptcha div { margin: 0 auto; padding-left: 70px;}
</style>
